引言

之前一個項目中，數(shù)據(jù)交互全部放在Vuex的action中，當時產(chǎn)生過一個質(zhì)疑，所有的action都是掛在全局上，如果有重名的action，會產(chǎn)生什么樣的結果？

image.png

為了避免產(chǎn)生重名的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

三、組件中使用

1. 第一種使用方式

// 導入輔助函數(shù) mapXXX
// 以mapState 為例

import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('命名空間名稱', ['yourState'])
  }
}

2. 第二種使用方式

// 借助vuex 提供的 createNamespacedHelpers 函數(shù)
// 返回綁定在命名空間名稱內(nèi)部的輔助函數(shù), 做了一次過濾

import { createNamespacedHelpers } from 'vuex'
import { mapState } = createNamespacedHelpers('命名空間名稱')

export default {
  computed: {
    ...mapState(['yourState'])
  }
}

bye bye

原文地址