Vuex namespaced: true的作用
vuex中的store分模块管理,需要在store的index.js中引入各个模块,为了解决不同模块命名冲突的问题,将不同模块的namespaced:true,之后在不同页面中引入getter、actions、mutations时,需要加上所属的模块名1、声明分模块的store时加上namespaced:true// initial stateconst state = {userId:'',//
·
vuex中的store分模块管理,需要在store的index.js中引入各个模块,为了解决不同模块命名冲突的问题,将不同模块的namespaced:true,之后在不同页面中引入getter、actions、mutations时,需要加上所属的模块名
1、声明分模块的store时加上namespaced:true
// initial state
const state = {
userId:'',//用户id
userName:'',//用户名称
token:'',//token
permission:''//权限
}
// getters
const getters = {
// 获取用户信息
getUserInfo(){
return state;
}
}
// actions
const actions = {}
// mutations
const mutations = {
setUserInfo(state,payload) {
console.log("payload:"+payload);
console.info(payload);
state.userId = payload.userId;
state.userName = payload.userName;
state.token = payload.token;
state.permission = payload.permission;
}
}
export default {
//namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候,添加一个父级名拼接。
namespaced: true,
state,
getters,
actions,
mutations
}
2、使用模块中的mutations、getters、actions时候,要加上模块名,例如使用commint执行mutations时
格式:模块名/模块中的mutations
xxx/setUserInfo
this.$store.commit(“userInfo/setUserInfo”,userInfo)
3、获取属性时同样加上模块名
格式:store.state.模块名.模块属性
$store.state.userInfo.userName
更多推荐
已为社区贡献7条内容
所有评论(0)