微客导航 » 文章资讯 » Vuex modules模式下mapState/mapMutations的操作实例

Vuex modules模式下mapState/mapMutations的操作实例

2023-08-11 16:37:04 324

当我们使用Vuex实现全局状态维护时，可能需要将状态值划分多个模块，比如一些root级的用户登录状态，token，用户级的用户信息，购物车级的购物车信息。

下面我们实例演示下如何在多模块下使用mapState/mapMutations。

modules只作用于属性，属性会归属在相应的模块名的命名空间下。
mutations,actions,getter没有命名空间的限定，所以要保证全局的唯一性，否则后者会覆盖前者

store/index.js

importVuefrom'vue'
importVuexfrom'vuex'

importuserfrom'./user'
importorderfrom'./order'

Vue.use(Vuex)

conststore=newVuex.Store({
modules:{
user,
order
},
state:{
hasLogin:false,
token:""
},
mutations:{
setHasLogin(state,hasLogin){
state.hasLogin=hasLogin
},
setToken(state,token){
state.token=token
}
}
})

exportdefaultstore

store/user.js

conststate={
name:"sqrtcat",
age:25
}
constmutations={
setUserName(state,name){
state.name=name
},
setUserAge(state,age){
state.age=age
}
}
constactions={

}
constgetters={

}

exportdefault{
state,
mutations,
actions,
getters
}

store/order.js

conststate={
name:"cart",
count:0
}
constmutations={
setOrderName(state,name){
state.name=name
},
setOrderCount(state,count){
state.count=count
}
}
constactions={

}
constgetters={

}

exportdefault{
state,
mutations,
actions,
getters
}

Vue引入

importVuefrom'vue'
importAppfrom'./App'

importstorefrom'./store'

Vue.config.productionTip=false

Vue.prototype.$store=store//注入仓库

constapp=newVue({
store//注入仓库
})

app.$mount()

index.vue

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Vuex modules模式下mapState/mapMutations的操作实例

热门推荐

随机推荐