Vuex的简单使用，基于Vue2
模仿他的，项目地址
https://github.com/iamshaunjp/vuex-playlist
视频地址
https://www.youtube.com/watch?v=BGAu__J4xoc&list=PL4cUxeGkcC9i371QO_Rtkl26MwtiJ30P2&index=1
要先安装nodejs，可以自行百度
第一步。我们先弄个vue-cli,因为这个项目是用vue2来弄的，所以我指定了版本号，这个项目目前是5年前的了，如果不指定版本号，可能你会安装到vue3默认版了，为了和上面的视频一直，我还是指定版本号了。
npm install -g @vue/cli@3.3.0
如果你以前有装的话可以 先卸载
npm uninstall -g @vue/cli
第二步
vue init webpack-simple vuex-playlist
第三步
他提示我要 npm i -g @vue/cli-init，如果你没有这个提示就不管他，如果有就先解决再
vue init webpack-simple vuex-playlist
第四步，一直回车
第五步，执行到npm run dev，会自动打开浏览器，显示http://localhost:8080/的
cd vuex-playlist
npm install
npm run dev
第六步
安装vuex，因为是vue2版本，安装也是指定的
npm install vuex@2.3.1 --save
第七步，新建component和store文件夹。里面对应的ProductListOne.vue ,ProductListTwo.vue 和 store.js 文件
ProductListOne.vue 文件
<template>
<div id="product-list-one">
<h2>Product List One</h2>
<ul>
<li v-for="(product,index) in saleProducts" :key="index">
<span class="name">{{product.name}}</span>
<span class="price">${{product.price}}</span>
</li>
</ul>
<button v-on:click="reducePrice(4)">Reduce Price</button>
</div>
</template>
<script>
import { mapActions } from 'vuex';
import { mapGetters } from 'vuex';
export default {
computed:{
products(){
return this.$store.state.products;
},
// saleProducts(){
// return this.$store.getters.saleProducts
// }
...mapGetters([
'saleProducts'
])
},
methods:{
// reducePrice(amount){
// this.$store.commit('reducePrice');
// this.$store.state.products.forEach(product=>{
// product.price -=1;
// })
// this.$store.dispatch('reducePrice',amount)
// }
...mapActions([
'reducePrice'
])
}
}
</script>
<style scoped>
#product-list-one{
background: #FFF8B1;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
margin-bottom: 30px;
padding: 10px 20px;
}
#product-list-one ul{
padding: 0;
}
#product-list-one li{
display: inline-block;
margin-right: 10px;
margin-top: 10px;
padding: 20px;
background: rgba(255,255,255,0.7);
}
.price{
font-weight: bold;
color: #E8800C;
}
</style>
ProductListTwo.vue 文件
<template>
<div id="product-list-two">
<h2>Product List Two</h2>
<ul>
<li v-for="(product,index) in saleProducts" :key="index">
<span class="name">{{product.name}}</span>
<span class="price">${{product.price}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
computed:{
products(){
return this.$store.state.products;
},
saleProducts(){
return this.$store.getters.saleProducts
}
},
}
</script>
<style scoped>
#product-list-two{
background: #D1E4FF;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
margin-bottom: 30px;
padding: 10px 20px;
}
#product-list-two ul{
padding: 0;
list-style-type: none;
}
#product-list-two li{
margin-right: 10px;
margin-top: 10px;
padding: 20px;
background: rgba(255,255,255,0.7);
}
.price{
font-weight: bold;
color: #860CE8;
display: block;
}
</style>
store.js文件
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export const store = new Vuex.Store({ strict:true, state:{ products:[ {name:'Banana Skin',price:20}, {name:'Shiny Star',price:40}, {name:'Green Shells',price:60}, {name:'Red Shells',price:80}, ] }, getters:{ saleProducts:state=>{ var saleProducts=state.products.map(product=>{ return { name:'**'+product.name+'**', price:product.price/2, } }) return saleProducts } }, mutations:{ reducePrice:(state,payload)=>{ state.products.forEach(product=>{ product.price -=payload; }) } }, actions:{ reducePrice:(context,payload)=>{ setTimeout(function(){ context.commit('reducePrice',payload) },2000) } } })
App.vue 文件
<template> <div id="app"> <product-list-one></product-list-one> <product-list-two></product-list-two> </div> </template> <script> import ProductListOne from './components/ProductListOne.vue'; import ProductListTwo from './components/ProductListTwo.vue'; export default { name: 'app', data () { return { } }, components:{ ProductListOne, ProductListTwo } } </script> <style> </style>
main.js 文件
import Vue from 'vue' import App from './App.vue' import {store} from './store/store' new Vue({ store:store, el: '#app', render: h => h(App) })
package.json 文件，这个文件你不要全部复制我的，主要看他们的版本号的
{ "name": "y", "description": "A Vue.js project", "version": "1.0.0", "author": "竹子 <2672036296@qq.com>", "license": "MIT", "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "vue": "^2.5.11", "vuex": "^2.3.1" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-stage-3": "^6.24.1", "cross-env": "^5.0.5", "css-loader": "^0.28.7", "file-loader": "^1.1.4", "vue-loader": "^13.0.5", "vue-template-compiler": "^2.4.4", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" } }
留意他们的版本号是否正确
建议看视频学习，那个博主讲得实在太好了
最后你会发现改一个页面的数据，其他页面的数据也会改变，不需要通过父子组件这样传递值，
那么这样就可以很好管理所有页面的一些共同数据了
