第一步：下载cnpm install vuex --save
第二步：在src目录下创建store目录，在store目录中创建三个文件
①state.js://保存数据状态
let state={
count:0,
goodsList:[]
}
export default state;
②mutations.js://写一下操作数据状态的方法
import state from './state.js'//导入数据状态state
export default{
increment(state,num){//increment加方法
state.count+=num;
},
reduce(state,num){//reduce减方法
state.count-=num;
},
addgoods(state,obj){//添加数组的方法
state.goodsList.push(obj)
}
}
③index.js:把state文件、mutations文件、getters文件集合到一起方便导出
import state from './state';
import mutations from './mutations'
import getters from './getters'
export default{
state,
mutations,
getters
}
④getters.js:相当于computed计算属性，把需要在页面显示的数据配置一下
export default{
count:(state)=>{
return state.count;
}
}
第三步：在min.js中配置
import Vuex from 'vuex';
Vue.use(Vuex);
import storeObj from '@/store/index'//导出引入全局vueX
let store=new Vuex.Store(storeObj);//使用
new Vue({
el:'#app',
router,
store,//在new Vue中注册全局使用
})
第四步：创建vue组件
比如：com11.vue组件
<button @click='red()'>减少3</button>
script中使用方法：
import{//先引入vuex 中mutations方法
mapMutations
} from 'vuex'
export default {
name:"com11",
methods:{
...mapMutations([
'reduce'//使用vuemutations中的减法方法
]),
red(){//减法方法
this.reduce(3)
}
}
}
比如：com22.vue组件（显示count）
com3
显示{{count}}
import {
mapGetters
}from 'vuex'
export default {
name:"com33",
computed:{
...mapGetters([
'count'
])
}
}
