引言

之前一个项目中，数据交互全部放在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'])
  }
}