Vuex Store Modules是什么？怎么用？一文详解！

terry 14小时前阅读数 11 #Vue

文章标签 Store Modules

在Vue.js的项目开发中，状态管理是一个至关重要的环节，当项目规模逐渐扩大，组件之间的状态传递变得复杂时，Vuex就成为了很多开发者的选择，而Vuex Store Modules（模块）更是其中一个非常实用的特性，那Vuex Store Modules到底是什么？又该怎么使用呢？下面我们就来详细了解一下。

Vuex Store Modules是什么？

Vuex Store Modules就是将Vuex的store分割成多个模块（module），每个模块都可以拥有自己的state、mutation、action、getter甚至是嵌套子模块，这有点像我们在开发大型项目时，把一个大文件拆分成多个小文件，每个小文件负责特定的功能模块，这样可以让代码结构更加清晰,便于维护和管理。

举个例子，如果我们开发一个电商网站，可能会有用户模块（包含用户登录、注册等状态）、商品模块（商品列表、购物车等状态），如果把这些都放在一个store中，代码会变得非常臃肿，而使用Vuex Store Modules，我们就可以把用户相关的状态管理放在user模块，商品相关的放在product模块,各司其职。

为什么需要Vuex Store Modules？

（一）代码结构清晰

随着项目的不断迭代，store中的代码量会越来越大，如果所有的状态、方法都混在一起，就像一个大杂烩，开发者很难快速找到自己需要修改或扩展的部分，而模块可以将不同功能的代码分离，就像把不同的物品放在不同的抽屉里,找起来一目了然。

### （二）便于多人协作

在团队开发中，不同的开发者可能负责不同的功能模块，使用Vuex Store Modules，每个开发者可以专注于自己负责的模块，减少代码冲突的可能性，比如前端A负责用户模块，前端B负责商品模块，他们可以在各自的模块中进行开发,互不干扰。

### （三）功能复用

我们可能会在多个项目中使用类似的功能模块，比如用户登录注册模块，当我们把它封装成一个Vuex Store Module后，在新的项目中就可以直接复用,提高开发效率。

Vuex Store Modules怎么用？

（一）基本使用

我们需要在Vuex的store中定义模块，假设我们有一个名为user的模块,代码如下：

```javascript // user.js const state = { userInfo: null }

const mutations = { SET_USER_INFO(state, info) { state.userInfo = info } }

const actions = { async fetchUserInfo({ commit }) { // 这里模拟异步请求获取用户信息 const response = await new Promise(resolve => { setTimeout(() => { resolve({ name: '张三', age: 25 }) }, 1000) }) commit('SET_USER_INFO', response) } }

const getters = { getUserInfo: state => state.userInfo }

export default { namespaced: true, // 开启命名空间 state, mutations, actions, getters }

<p>然后在store的index.js中引入并注册模块：</p>
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    user
  }
})

这样，我们就定义并注册了一个user模块，在组件中使用时，如果模块开启了`namespaced: true`（推荐开启，避免命名冲突）,就需要通过模块名来访问：

```html ``` ### （二）嵌套模块

除了平级模块，Vuex Store Modules还支持嵌套模块，比如在user模块中，我们可以再定义一个子模块,比如userProfile：

```javascript // user.js const state = { userInfo: null }

const mutations = { SET_USER_INFO(state, info) { state.userInfo = info } }

const actions = { async fetchUserInfo({ commit }) { const response = await new Promise(resolve => { setTimeout(() => { resolve({ name: '张三', age: 25 }) }, 1000) }) commit('SET_USER_INFO', response) } }

const getters = { getUserInfo: state => state.userInfo }

const userProfile = { namespaced: true, state: { profileInfo: { address: '北京' } }, mutations: { UPDATE_ADDRESS(state, address) { state.profileInfo.address = address } }, actions: { updateAddress({ commit }, address) { commit('UPDATE_ADDRESS', address) } }, getters: { getAddress: state => state.profileInfo.address } }

export default { namespaced: true, state, mutations, actions, getters, modules: { userProfile } }

<p>在组件中访问嵌套模块：</p>
```html
<template>
  <div>
    <button @click="updateUserAddress">更新用户地址</button>
    <p>{{ userAddress }}</p>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  computed: {
   ...mapGetters('user/userProfile', ['getAddress'])
  },
  methods: {
   ...mapActions('user/userProfile', ['updateAddress']),
    updateUserAddress() {
      this.updateAddress('上海')
    }
  }
}
</script>

（三）模块之间的通信

我们可能需要模块之间进行通信，一种常见的方式是通过`rootState`和`rootGetters`来访问根节点的状态和getter,比如在user模块的action中访问商品模块的状态：

```javascript // user.js const actions = { async fetchUserInfo({ commit, rootState }) { // 这里假设商品模块有一个名为productList的state console.log(rootState.product.productList) const response = await new Promise(resolve => { setTimeout(() => { resolve({ name: '张三', age: 25 }) }, 1000) }) commit('SET_USER_INFO', response) } } ```

如果需要在模块的action中提交根节点的mutation，可以使用`{ root: true }`：

```javascript // user.js const actions = { async someAction({ commit }) { // 提交根节点的mutation commit('ROOT_MUTATION', payload, { root: true }) } } ```