引言
之前一個(gè)項(xiàng)目中度陆，數(shù)據(jù)交互全部放在Vuex的action中蔽介，當(dāng)時(shí)產(chǎn)生過(guò)一個(gè)質(zhì)疑摘投，所有的action都是掛在全局上煮寡，如果有重名的action，會(huì)產(chǎn)生什么樣的結(jié)果犀呼？
image.png
為了避免產(chǎn)生重名的action或者mutation幸撕，可以使用Vuex的命名空間（awesome ??）
image.png
一、store中設(shè)置開(kāi)啟命名空間
export default {
namespaced: true, // 開(kāi)啟命名空間
state: { yourState: '' // 下文會(huì)使用},
mutations: {},
actions: {}
}
二圆凰、掛載store時(shí)設(shè)置命名空間名
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
三杈帐、組件中使用
- 第一種使用方式
// 導(dǎo)入輔助函數(shù) mapXXX
// 以mapState 為例
import { mapState } from 'vuex'
export default {
computed: {
...mapState('命名空間名稱(chēng)', ['yourState'])
}
}
- 第二種使用方式
// 借助vuex 提供的 createNamespacedHelpers 函數(shù)
// 返回綁定在命名空間名稱(chēng)內(nèi)部的輔助函數(shù), 做了一次過(guò)濾
import { createNamespacedHelpers } from 'vuex'
import { mapState } = createNamespacedHelpers('命名空間名稱(chēng)')
export default {
computed: {
...mapState(['yourState'])
}
}
bye bye
