为什么要有namespaced命名空间？

默认情况下，模块内部的action、mutation和getter都是在全局命名空间。 假设两个modules内部有同名的action、mutation和getter，则vuex会报错。

namespaced作用：保证模块内部的高封闭性，使其不会收到外部影响。

 1.开启namespaced ： namespaced: true

 2.namespaced语法变化

原始语法

• 全局的：指的是 store/index.js里面的 state、mutations、actions

• 模块的：指的是模块内部的 state、mutations、actions

//state
全局的: $store.state.数据项名
模块的: $store.state.模块名.数据项名
//getters
全局的： $store.getters.getter名
模块的： $store.getters['模块名/getters名']
//mutations
全局的: $store.commit('mutations名',载荷) 
模块的: $store.commit('模块名/mutations名',载荷)
//actions
全局的: $store.dispatch('actions名',载荷) 
模块的: $store.dispatch('模块名/actions名',载荷)

 辅助函数语法

//state
全局的: ...mapState(['数据项名']),
模块的: ...mapState('模块名', ['数据项名']),
//getters
全局的: ...mapGetters(['数据项名']),
模块的: ...mapGetters('模块名', ['数据项名']),
//mutations
// 全局的
...mapMutations(['mutaion名'])
// 模块中的
...mapMutations('模块名', ['mutaion名'])
//actions
...mapActions(['action名'])
// 模块中的
...mapActions('模块名', ['action名'])

• 以下是使用namespaced之后的home.vue写法

使用了辅助函数之后,访问state数据就不需要添加模块名了