为什么要有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数据就不需要添加模块名了
