.使用Vuex前,要先在终端工程中输入 npm install vuex --save进行下载 ,下载成功的标志是:在node_modules文件夹中有vuex文件夹
以及:
vuex的简单使用例子
import Vuex from ‘vuex’
import Vue from ‘vue’
Vue.use(Vuex)
export default new Vuex.Store({
state:{
goodsArr:[
{
name:‘小当家’,
type:‘mian’,
price:0.5,
count:0,
},
{
name:‘小浣熊’,
type:‘mian’,
price:1,
count:0,
},
{
name:‘国光苹果’,
type:‘fruit’,
price:3.99,
count:0,
},
{
name:‘泰国香蕉’,
type:‘fruit’,
price:6.66,
count:0,
}
],
},
mutations:{//对内全局
//state 是参数一 代表上面那个stAate ,,obj 参数二 代表调用时的参数
addGoodsToCar:function (state,obj) {
state.goodsArr.map((val,index)=>{
if (val.name==obj.name){
//商品对应的count++
state.goodsArr[index]['count']++;
}
})
},
//state 是参数一 代表上面那个stAate ,,obj 参数二 代表调用时的参数
subGoodsToCar:function (state,obj) {
state.goodsArr.map((val,index)=>{
if (val.name==obj.name&&state.goodsArr[index]['count']>0){
//商品对应的count++
state.goodsArr[index]['count']--;
}
})
},
},
actions:{//将mutations的静态方法对外 每个mutations对应一个actions方法
'addtocar':function (context,obj) {
context.commit('addGoodsToCar',obj);
},
'subtocar':function (context,obj) {
context.commit('subGoodsToCar',obj);
},
'allp':function (context,obj) {
context.commit('allp',obj);
}
}
//state用法 this.store.dispatch(‘actions方法名’,参数)
//mutations: 由对应actions触发(context.commit(‘mutations方法名’),参数)
// 一般mutations和一个actions对应
})