vuex之namespaced的使用详解

vuex中的store分模块管理，需要在store的index.js中引入各个模块，为了解决不同模块命名冲突的问题，将不同模块的namespaced:true，可以实现分离模板间的独立。

使用举例如下：

定义一个peopleInfo模块，定义了state,actions,mutatios等

import { getUserInfo } from "@/api/userController"
const peopleInfo = {
  namespaced: true, // 模块化分离
  state: {
   name: 'chen'
  },
  actions: {
    GetUserInfo ({ commit }) {
      return new Promise((resolve, reject) => {
        getUserInfo().then((res) => {
          const data = res.data
          commit('changeNameFun', data.userName)
          resolve(data)
        }).catch(err => {
          reject(err)
        })
      })
    },
  },
  mutations: {
    changeNameFun (state, val) {
      state.name = val
    }
  },


}



export default peopleInfo

在store的入口文件引入该模块：

......
import peopleInfo from './peopleInfo.js'
........
const store = new Vuex.Store({
  state,
  getters,
  mutations,
  modules: {
    peopleInfo
  }
})
export default stores

　用模块中定义的state,getters,actions,mutations时，store操作.模块名.执行动作

   比如：this.$store.state.peopleInfo.name, this.$store.commit("peopleInfo/mutations'','wang'), this.$store.dispatch('peopleInfo/actions')等等

参考文章：https://blog.csdn.net/fuck487/article/details/83411856