这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战

前言：

大家好啊，又见面了，我是loncon，一个前端路上不断探索的小白，让我们开始今天的主题：今天来讲一下vuex中的命名空间 namespaced。

vuex介绍

vuex是vue的状态管理工具，状态即数据。状态管理就是集中管理vue中通用的一些数据默认情况下，state是每个模块私有的，模块内部的 action、mutation 和 getter 是注册在全局命名空间的

核心概念 - state 状态

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。

state提供数据

打开项目中的store.js文件，在state对象中可以添加我们要共享的数据。

// 创建store对象
const store = new Vuex.Store({
  // vuex的配置
  // state: 状态 即数据 state指的是vuex中的数据
  state: {
    money: 100
  }
})

默认情况下，state是每个模块私有的，模块内部的 action、mutation 和 getter 
是注册在**全局命名空间**的

这句话的意思是 刚才的user模块还是setting模块，它的 action、mutation 和 getter 
其实并没有区分，都可以直接通过全局的方式调用, 如下图所示:

但是，如果我们想保证内部模块的高封闭性，我们可以采用namespaced来进行设置 modules/user.js

const state = {
  userInfo: {
    name: 'zs',
    age: 18
  },
  myMsg: '我的数据'
}

const mutations = {
  updateMsg (state, msg) {
    state.myMsg = msg
  }
}

const actions = {}

const getters = {}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

提交模块中的mutation

全局的:   this.$store.commit('mutation函数名', 参数)

模块中的: this.$store.commit('模块名/mutation函数名', 参数)

namespaced: true 后, 要添加映射, 可以加上模块名, 找对应模块的 state/mutations/actions/getters

computed: {
  // 全局的
  ...mapState(['count']),
  // 模块中的
  ...mapState('user', ['myMsg']),
},
methods: {
  // 全局的
  ...mapMutations(['addCount'])
  // 模块中的
  ...mapMutations('user', ['updateMsg'])
}

前端小白不迷路 - 今天来讲一下vuex中的命名空间 namespaced

前言：

vuex介绍

核心概念 - state 状态

state提供数据