.使用Vuex前,要先在终端工程中输入 npm install vuex --save进行下载 ,下载成功的标志是:在node_modules文件夹中有vuex文件夹

Vuex的使用
以及:
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.state.(//actionsthis.store.state.属性名 (可读写) //actions:this.store.dispatch(‘actions方法名’,参数)
//mutations: 由对应actions触发(context.commit(‘mutations方法名’),参数)
// 一般mutations和一个actions对应

})

相关文章: