浅谈Vuex@2.3.0 中的 state 支持函数申明
vuex2.3.0的发布说明:Modulescannowdeclarestateusingafunction-thisallowsthesamemoduledefinitiontobereused(e.g.multipletimesinthesamestore,orinmultiplestores)
假如你vuex的模块有多个格式是完全一样的,这时候就可以把这个模块公共出来,在Vuex实例里引用,如:
importapifrom'~api' constactions={ async['get']({commit,rootState:{route:{path}}},config={}){ const{data:{code,data}}=awaitapi.post(config.url,config.data) if(code===1001)commit('receive',data) } } constmutations={ ['receive'](state,data){ state.data=[].concat(data) }, ['modify'](state,payload){ constindex=state.data.findIndex(item=>item.id===payload.id) if(index>-1){ state.data.splice(index,1,payload) } }, ['insert'](state,payload){ state.data=[payload].concat(state.data) }, ['remove'](state,id){ constindex=state.data.findIndex(item=>item.id===id) state.data.splice(index,1) } } constgetters={ ['get'](state){ returnstate.data } } exportconst_actions=actions exportconst_mutations=mutations exportconst_getters=getters exportdefault{ namespaced:true, actions, mutations, getters }
importVuefrom'vue' importVuexfrom'vuex' importlistsfrom'./general/lists' Vue.use(Vuex) exportdefaultnewVuex.Store({ namespaced:true, modules:{ base:{ namespaced:true, modules:{ app:{...lists,state:{lists:{data:[],total:0,current_page:1}}}, platform:{...lists,state:{lists:{data:[],total:0,current_page:1}}}, product:{ namespaced:true, modules:{ category:{...lists,state:{lists:{data:[],total:0,current_page:1}}}, } }, keyword:{ namespaced:true, modules:{ username:{...lists,state:{lists:{data:[],total:0,current_page:1}}}, } }, } }, buzz:{ namespaced:true, modules:{ shop:{...lists,state:{lists:{data:[],total:0,current_page:1}}}, } } })
但是state却需要每个单独设置,如果直接设置在lists里,会导致state对象被引用共享
在vuex@2.3.0中,这个问题将不存在
importapifrom'~api' constactions={ async['get']({commit,rootState:{route:{path}}},config={}){ const{data:{code,data}}=awaitapi.post(config.url,config.data) if(code===1001)commit('receive',data) } } constmutations={ ['receive'](state,data){ state.data=[].concat(data) }, ['modify'](state,payload){ constindex=state.data.findIndex(item=>item.id===payload.id) if(index>-1){ state.data.splice(index,1,payload) } }, ['insert'](state,payload){ state.data=[payload].concat(state.data) }, ['remove'](state,id){ constindex=state.data.findIndex(item=>item.id===id) state.data.splice(index,1) } } constgetters={ ['get'](state){ returnstate.data } } exportconst_actions=actions exportconst_mutations=mutations exportconst_getters=getters exportdefault{ namespaced:true, state(){ return{lists:{data:[],total:0,current_page:1}} }, actions, mutations, getters }
importVuefrom'vue' importVuexfrom'vuex' importlistsfrom'./general/lists' Vue.use(Vuex) exportdefaultnewVuex.Store({ namespaced:true, modules:{ base:{ namespaced:true, modules:{ app:lists, platform:lists, product:{ namespaced:true, modules:{ category:lists, } }, keyword:{ namespaced:true, modules:{ username:lists, } }, } }, buzz:{ namespaced:true, modules:{ shop:lists, } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。