引言
之前一个项目中，数据交互全部放在Vuex的action中，当时产生过一个质疑，所有的action都是挂在全局上，如果有重名的action，会产生什么样的结果？
image.png
为了避免产生重名的action或者mutation，可以使用Vuex的命名空间（awesome 😂）
image.png
一、store中设置开启命名空间
export default {
namespaced: true, // 开启命名空间
state: { yourState: '' // 下文会使用},
mutations: {},
actions: {}
}
二、挂载store时设置命名空间名
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import anyStore from './modules/anyStore'
const store = new Vuex.Store({
modules: {
// 挂载：挂载方式共有两种
anyStore, // 命名空间名为 anyStore
namespace: anyStore // 命名空间名为 namespace
}
})
export default store
三、组件中使用
- 第一种使用方式
// 导入辅助函数 mapXXX
// 以mapState 为例
import { mapState } from 'vuex'
export default {
computed: {
...mapState('命名空间名称', ['yourState'])
}
}
- 第二种使用方式
// 借助vuex 提供的 createNamespacedHelpers 函数
// 返回绑定在命名空间名称内部的辅助函数, 做了一次过滤
import { createNamespacedHelpers } from 'vuex'
import { mapState } = createNamespacedHelpers('命名空间名称')
export default {
computed: {
...mapState(['yourState'])
}
}
bye bye
