Vuex命名空间namespaced怎么使用
更新时间：2023-10-29
### 什么是Vuex命名空间？
命名空间是一种隔离作用域，将模块中定义的所有的 action、mutation、getter和state封装到命名空间中，使得不同模块内的同名action、mutation、getter和state不会发生冲突。Vuex通过`namespaced`属性提供了namespace模式。默认情况下，`namespaced`是 `false`。如果需要开启命名空间，则需要将其设置为`true`。
下面是一个基本的示例，其中，示例中的`counter`是一个module，且启用了命名空间模式：
```javascript
const store = new Vuex.Store({
modules: {
counter: {
namespaced: true, // 开启命名空间模式
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
incrementIfOddOnRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.count) % 2 === 1) {
commit('increment')
}
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}
}
})
```
### 在命名空间模式下使用action
在命名空间模式下，action需要以模块名为前缀进行访问。例如，下面的代码展示了如何使用action。
```javascript
store.dispatch('counter/increment')
```
如果在调用action时需要访问全局state，可以使用`rootState`属性。示例：
```javascript
const store = new Vuex.Store({
state: {
count: 0
},
modules: {
a: {
namespaced: true,
actions: {
increment ({ commit, rootState }) {
commit('increment')
commit('increment', { amount: 10 }, { root: true })
}
}
}
}
})
```
### 在命名空间模式下使用mutation
在命名空间模式下，mutation需要以模块名为前缀进行访问。例如，下面的代码展示了如何使用mutation。
```javascript
store.commit('counter/increment')
```
如果需要访问模块内的state，可以使用`state`属性。示例：
```javascript
const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
state: {
balance: 0
},
mutations: {
deposit (state, amount) {
state.balance += amount
}
},
actions: {
deposit ({ commit }, amount) {
commit('deposit', amount)
}
}
}
}
})
```
### 在命名空间模式下使用getter
在命名空间模式下，getter也需要以模块名为前缀进行访问：
```javascript
store.getters['counter/doubleCount'] // -> 6
```
在模块内部定义的getter和在使用中定义的getter是需要区分的。下方展示的是定义在模块内的getter：
```javascript
const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
state: {
balance: 0
},
getters: {
balance (state) {
return state.balance
}
}
}
},
getters: {
accountBalance (state, getters, rootState) {
return getters['account/balance']
}
}
})
```
### 总结
Vuex提供了强大的命名空间模式，可以有效避免在模块之间产生命名冲突。使用命名空间模式时，需要注意不仅需要在模块定义时设置命名空间（通过模块的 `namespaced:true`属性），同时在访问action、mutation和getter时，也需要使用模块名作为前缀。通过上述代码示例，不难发现，在命名空间模式下，我们需要格外注意模块与全局的关系，并谨慎设计命名空间的结构，才能发挥最优效果。同时，为了便于模块内部的一致性操作，建议在模块内定义好各种需要使用的action、mutation和getter，避免在使用时误引用全局的状态。
