/* 统一在mutations里面修改state中的状态 / mutations: { / mutations通过payload来接收commit传过来的参数 / ADD(state, payload) { / 模拟从后台获取数据并操作的异步场景 在mutations写异步会数据混乱*/ /* setTimeout(()=>{ state.num+=payload; },500) / state.num += payload; }, DEL(state, payload) { / state.num=state.num-payload / state.num -= payload; } }, actions: { / 异步请求要放在actions方法中去写 不要再组件里去写,不然就起不到作用 / addajax: function ({ commit }, data) { setTimeout(() => { / 使用解构出来的commit方法来 提交一个mutations方法ADD来修改 state中的值 */ commit('ADD', data) }, 500) } },
/* 利用mapMutations方法使用拓展运算符把mutations的方法解构在methods中 在this中也可以找到对应解构出来的方法*/ /* ...mapMutations(['ADD','DEL']), / / 如果mutations中的方法名和methods中的同名了,可以采用对象的形式修改 / ...mapMutations({ addfn:'ADD', delfn:'DEL' }), / 类似于下面 / / ADD:function(){...}, DEL:function(){...}, / addNum(){ / this.store.commit('ADD',2) */ /* this.ADD(2) */ this.addfn(2); }, delNum(){ /* this.store.commit('DEL',2) / / this.DEL(2) / this.delfn(2) }, ADD(){ console.log(2) }, / 利用mapActions方法使用拓展运算符把actions的方法解构在methods中 在this中也可以找到对应解构出来的方法*/ /* 会在methods中解构成类似的形式 / / addajax:function(){...},/ / ...mapActions(['addajax']), / / 如果actions中的方法名和methods中的同名了,可以采用对象的形式修改 */ ...mapActions({ addajax2:'addajax' }), ajaxfn(){ this.addajax2(5) }, addajax(){ console.log(5) } }