vuex怎么模块化编码和命名空间
更新时间：2023-10-26
### 简介
Vuex是Vue.js应用程序的状态管理模式。它是一个大型的、工程级的插件，提供了一种按照一定规则组织和管理状态的方法。它集中管理和维护应用的所有组件之间共享的状态，并使用相应的规则确保状态以一种可预测的方式发生变化。不过，当Vue项目变得越来越复杂时，单一的store已经无法满足要求了。接下来让我们了解一下如何将Vuex进行模块化编码和使用命名空间的方法。
### 模块化编码
Vuex 的 store 由多个 module 构成，每个 module 有自己的 state、mutation、action、getter。模块化编程可以提高代码的可维护性。在Vuex中，我们可以使用 `createNamespacedHelpers` 方法来为模块创建命名空间。
在模块中，我们需要先定义一个变量 `namespaced` 设为 true，然后把 `state`、`mutations`、`actions`、`getters` 都写到这个模块下。定义完后，我们在调用这些状态等属性时，需要在前面加上定义好的模块名。
举个例子来说，我们需要定义一个user模块
```javascript
const user = {
namespaced: true,
state: {
userInfo: {}
},
mutations: {
setUserInfo(state, info) {
state.userInfo = info
}
},
actions: {
getUserInfo({ commit }, id) {
//get user info from backend
let userInfo = {}
commit('setUserInfo', userInfo)
}
},
getters: {
userInfo(state) {
return state.userInfo
}
}
}
```
我们在调用这些状态等属性时，需要在前面加上定义好的模块名，例如：
```javascript
this.$store.commit('user/setUserInfo', userInfo);
this.$store.dispatch('user/getUserInfo', id);
this.$store.getters['user/userInfo'];
```
### 命名空间
通过模块化编程，我们已经将Vuex分成了多个模块，不同的模块具有不同的状态和行为，但是这会带来一个问题 - 随着应用的复杂性增加，会导致各种action、mutation和getter命名间的冲突。命名空间可以解决这个问题。
在一个命名空间下，所有的action、mutation、getter都会自动添加上这个命名空间前缀。这样，我们就不用担心不同模块重复问题了。覆盖其他模块的 mutation、action、getter是一个很严重的错误。因此，强烈建议在所有模块中使用命名空间。
使用命名空间需要在模块中定义一个 `namespace` 属性。然后在调用这些状态等属性时，需要在前面加上定义好的模块名。我们可以使用 `mapActions`、`mapGetters`、`mapMutations` 和 `mapState` 辅助函数把每个模块的命名空间添加到函数内部。
举个例子来说，如果我们需要在组件中使用到定义好的user模块的action、mutation和getter，可以这么写：
```javascript
import { mapActions, mapGetters, mapMutations } from 'vuex'
export default {
computed: {
...mapGetters('user', ['userInfo'])
},
methods: {
...mapActions('user', ['getUserInfo']),
...mapMutations('user', ['setUserInfo'])
}
}
```
然后在组件中即可直接调用命名空间内的action、mutation和getter:
```javascript
this.getUserInfo(); // 调用user模块的getUserInfo action
this.setUserInfo(info); // 调用user模块的setUserInfo mutation
this.userInfo; // 调用user模块的userInfo getter
```
### 总结
在Vuex中，我们可以使用模块化编程和命名空间来提高代码的可维护性和避免状态重复的问题。模块化编程可以让我们按照模块的方式去管理状态、mutation、action和getter，以便于代码的维护和管理。命名空间则可以避免不同模块之间的命名冲突，避免覆盖其他模块的 mutation、action、getter。通过使用 `createNamespacedHelpers` 方法和 `mapActions`、`mapGetters`、`mapMutations` 和 `mapState` 辅助函数，可以方便地实现命名空间的调用。
完整代码示例：
```javascript
// user.js
const user = {
namespaced: true,
state: {
userInfo: {}
},
mutations: {
setUserInfo(state, info) {
state.userInfo = info
}
},
actions: {
getUserInfo({ commit }, id) {
//get user info from backend
let userInfo = {}
commit('setUserInfo', userInfo)
}
},
getters: {
userInfo(state) {
return state.userInfo
}
}
}
export default user;
```
```javascript
// main.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './user.js'
Vue.use(Vuex)
const store = new Vuex.store({
modules: {
user: user
}
})
export default store;
```
```javascript
// component.vue
import { mapActions, mapGetters, mapMutations } from 'vuex'
export default {
computed: {
...mapGetters('user', ['userInfo'])
},
methods: {
...mapActions('user', ['getUserInfo']),
...mapMutations('user', ['setUserInfo'])
}
}
```
