浅谈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,
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
热门推荐
10 祝女儿简短祝福语大全
11 大学新年祝福语简短创意
12 元旦适合的祝福语简短
13 朋友出远门祝福语简短
14 初六简短的祝福语
15 祝男孩生日祝福语简短
16 同事调离的祝福语简短
17 拜年红包的祝福语简短
18 妈妈生日祝福语简短励志