vuex namespaced的作用以及使用方式

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,
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 

原文鏈接：https://blog.csdn.net/fuck487/article/details/83411856