Vuex：如何利用其`modules`与`namespacing`管理复杂状态？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vuex 模块化与命名空间：驾驭复杂状态的利器

大家好，今天我们来深入探讨 Vuex 中 modules 和 namespacing 这两个关键特性，它们是应对大型 Vue 应用中复杂状态管理的有效武器。我们将从问题出发，逐步讲解其原理、用法，并通过实际案例演示如何在项目中运用它们，最终达到提升代码可维护性和可扩展性的目的。

1. 为什么要模块化？状态管理的挑战

想象一下，一个大型电商平台，包含用户管理、商品管理、订单管理、购物车等等多个模块。如果所有状态都放在一个 Vuex Store 中，会面临以下问题：

状态混乱： 所有的 state、mutations、actions 和 getters 都混杂在一起，难以维护和追踪。
命名冲突： 不同模块可能存在相同的 mutation 或 action 名称，导致意外覆盖或错误。
代码臃肿： 单个 Store 文件变得越来越大，难以阅读和理解。
可维护性差： 修改一个模块的状态可能会影响到其他模块，增加了维护成本。

因此，我们需要一种方法来将 Store 分割成更小的、独立的模块，这就是 Vuex modules 的作用。

2. Vuex Modules：化整为零，分而治之

Vuex 的 modules 允许我们将 Store 分割成多个子模块，每个模块拥有自己的 state、mutations、actions 和 getters。这就像把一个大的房间分隔成多个小房间，每个房间负责不同的功能，从而降低了复杂性。

2.1 基本结构

一个 Vuex module 看起来像这样：

const moduleA = {
  state: () => ({
    count: 0
  }),
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

export default moduleA

2.2 如何注册 Modules

在创建 Vuex Store 时，我们可以通过 modules 选项注册这些模块：

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './modules/moduleA'
import moduleB from './modules/moduleB'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
})

export default store

2.3 访问 Modules 的 State、Mutations、Actions 和 Getters

默认情况下，模块内部的 state、mutations、actions 和 getters 都会被注册到全局命名空间下。这意味着，我们可以像访问根 Store 的属性一样访问模块的属性，但这也带来了命名冲突的风险。

State: store.state.moduleA.count
Mutations: store.commit('increment') （如果 moduleA 中有 increment mutation，则会调用它）
Actions: store.dispatch('incrementAsync') （如果 moduleA 中有 incrementAsync action，则会调用它）
Getters: store.getters.doubleCount （如果 moduleA 中有 doubleCount getter，则会调用它）

3. Namespacing：避免命名冲突，隔离模块作用域

为了避免命名冲突和提高代码的可维护性，我们可以为模块启用 namespaced: true。这将为模块创建一个独立的命名空间，使得模块内部的 state、mutations、actions 和 getters 只能通过特定的前缀来访问。

3.1 启用 Namespacing

const moduleA = {
  namespaced: true,
  state: () => ({
    count: 0
  }),
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

export default moduleA

3.2 访问 Namespaced Modules 的属性

启用 namespaced: true 后，访问方式会发生变化：

State: store.state.moduleA.count (访问方式不变)
Mutations: store.commit('moduleA/increment')
Actions: store.dispatch('moduleA/incrementAsync')
Getters: store.getters['moduleA/doubleCount']

可以看到，mutation、action 和 getter 的访问都需要加上模块的名称作为前缀，例如 moduleA/increment。

3.3 在组件中使用 Namespaced Modules

在组件中，我们可以使用 mapState、mapMutations、mapActions 和 mapGetters 辅助函数来更方便地访问 namespaced modules 的属性。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState('moduleA', ['count']),
    ...mapGetters('moduleA', ['doubleCount'])
  },
  methods: {
    ...mapMutations('moduleA', ['increment']),
    ...mapActions('moduleA', ['incrementAsync'])
  }
}
</script>

注意，mapState、mapMutations、mapActions 和 mapGetters 的第一个参数是模块的名称（’moduleA’）。

4. Module 的嵌套

Modules 可以嵌套，形成一个树状结构。这允许我们更精细地组织状态，将相关的状态放在一起，形成更小的、更易于管理的模块。

const moduleC = {
  namespaced: true,
  state: () => ({
    name: 'Module C'
  }),
  getters: {
    fullName (state) {
      return state.name + ' - nested'
    }
  }
}

const moduleB = {
  namespaced: true,
  state: () => ({
    message: 'Hello from Module B'
  }),
  modules: {
    moduleC // moduleC 嵌套在 moduleB 中
  }
}

const store = new Vuex.Store({
  modules: {
    moduleB
  }
})

// 访问嵌套模块的状态和 getter
console.log(store.state.moduleB.message) // Hello from Module B
console.log(store.getters['moduleB/moduleC/fullName']) // Module C - nested

5. 深入理解 Mutations 和 Actions 中的 rootState 和 rootGetters

即使启用了 namespaced: true，在 mutations 和 actions 中，我们仍然可以访问根 Store 的 state 和 getters。

rootState: 根 Store 的 state
rootGetters: 根 Store 的 getters

我们可以通过 mutation 和 action 的第二个参数（通常命名为 payload 或 data）来传递数据，并通过第三个参数（通常命名为 rootState 和 rootGetters）来访问根 Store 的 state 和 getters。

const moduleA = {
  namespaced: true,
  state: () => ({
    count: 0
  }),
  mutations: {
    increment (state, payload, rootState) {
      state.count += rootState.globalValue // 访问根 Store 的 globalValue
    }
  },
  actions: {
    incrementAsync ({ commit, rootState, rootGetters }) {
      setTimeout(() => {
        const incrementValue = rootGetters.globalDoubleValue // 访问根 Store 的 globalDoubleValue getter
        commit('increment', incrementValue)
      }, 1000)
    }
  }
}

const store = new Vuex.Store({
  state: {
    globalValue: 10
  },
  getters: {
    globalDoubleValue (state) {
      return state.globalValue * 2
    }
  },
  modules: {
    moduleA
  }
})

6. Dispatching Actions in Namespaced Modules

在 namespaced module 中 dispatch action，我们可以使用 dispatch 方法，并指定完整的 action 类型（包含模块名称）。

const moduleA = {
  namespaced: true,
  actions: {
    actionA ({ dispatch }) {
      dispatch('moduleB/actionB', null, { root: true }) //  在 moduleA 中 dispatch moduleB 的 actionB
    }
  }
}

const moduleB = {
  namespaced: true,
  actions: {
    actionB () {
      console.log('actionB is called')
    }
  }
}

const store = new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
})

store.dispatch('moduleA/actionA') // 调用 moduleA 的 actionA，进而调用 moduleB 的 actionB

注意，dispatch 方法的第三个参数是一个可选对象，其中 root: true 表示我们需要 dispatch 一个根 Store 的 action，而不是当前模块的 action。

7. 一个完整的例子：电商平台的购物车模块

假设我们有一个电商平台的购物车模块，它需要管理购物车中的商品列表、商品数量、总价等等。我们可以使用 Vuex modules 和 namespacing 来组织这个模块的状态。

// cart.js
const cart = {
  namespaced: true,
  state: () => ({
    items: [], // 购物车商品列表，每个元素是一个对象，包含 productId 和 quantity
    checkoutStatus: null // 结账状态：'success'、'fail' 或 null
  }),
  getters: {
    cartProducts (state, getters, rootState) {
      return state.items.map(({ productId, quantity }) => {
        const product = rootState.products.all.find(product => product.id === productId)
        return {
          title: product.title,
          price: product.price,
          quantity
        }
      })
    },
    cartTotalPrice (state, getters) {
      return getters.cartProducts.reduce((total, product) => {
        return total + product.price * product.quantity
      }, 0)
    }
  },
  mutations: {
    pushProductToCart (state, { id }) {
      state.items.push({
        productId: id,
        quantity: 1
      })
    },
    incrementItemQuantity (state, { id }) {
      const cartItem = state.items.find(item => item.productId === id)
      cartItem.quantity++
    },
    setCheckoutStatus (state, status) {
      state.checkoutStatus = status
    },
    emptyCart (state) {
      state.items = []
    }
  },
  actions: {
    addProductToCart ({ commit, state }, product) {
      if (product.inventory > 0) {
        const cartItem = state.items.find(item => item.productId === product.id)
        if (!cartItem) {
          commit('pushProductToCart', { id: product.id })
        } else {
          commit('incrementItemQuantity', cartItem)
        }
        // remove 1 item from stock
        commit('products/decrementProductInventory', { id: product.id }, { root: true })
      }
    },
    checkout ({ commit, state }, products ) {
      // 保存当前购物车商品
      const savedCartItems = [...state.items]
      // 清空购物车
      commit('emptyCart')
      commit('setCheckoutStatus', null)
      // 模拟异步结账
      setTimeout(() => {
        // 随机成功或失败
        (Math.random() > 0.5)
          ? commit('setCheckoutStatus', 'success')
          : commit('setCheckoutStatus', 'fail')
        // 失败时，将商品重新添加到购物车
        if (state.checkoutStatus === 'fail') {
            commit('setCartItems', { savedCartItems })
        }
      }, 500)
    }
  }
}

export default cart

// products.js
const products = {
    namespaced: true,
    state: () => ({
      all: [
        { id: 1, title: 'iPad 4 Mini', price: 500.01, inventory: 2 },
        { id: 2, title: 'H&M T-Shirt White', price: 10.99, inventory: 10 },
        { id: 3, title: 'Charli XCX - Sucker CD', price: 19.99, inventory: 5 }
      ]
    }),
    getters: {
        availableProducts (state, getters) {
            return state.all.filter(product => product.inventory > 0)
          },

        productById (state) {
        return productId => {
            return state.all.find(product => product.id === productId)
        }
        }
    },
    mutations: {
        decrementProductInventory (state, { id }) {
            const product = state.all.find(product => product.id === id)
            product.inventory--
        }
    },
    actions: {
        getAllProducts({ commit }) {
          // 假设我们从 API 获取商品列表
          // 这里直接模拟数据
        }
    }
}

export default products

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import cart from './modules/cart'
import products from './modules/products'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    cart,
    products
  }
})

export default store

在这个例子中，我们将购物车相关的状态、getters、mutations 和 actions 放在 cart module 中，将商品相关的状态放在 products module 中。通过 namespaced: true，我们避免了命名冲突，并且可以清晰地知道每个属性属于哪个模块。

8. 什么时候应该使用 Modules 和 Namespacing？

项目规模较大： 当项目包含多个模块，状态复杂时，使用 modules 可以提高代码的可维护性和可扩展性。
需要避免命名冲突： 当不同模块可能存在相同的 mutation 或 action 名称时，启用 namespacing 可以避免意外覆盖或错误。
需要隔离模块作用域： 当希望将不同模块的状态隔离开来，使其互不影响时，可以使用 modules 和 namespacing。

9. Modules与 Namespacing 的使用技巧

技巧	说明
合理的模块划分	将相关的状态、mutations、actions 和 getters 放在同一个模块中，保持模块的内聚性。
始终启用 `namespaced: true`	除非有非常特殊的需求，否则建议始终为模块启用 `namespaced: true`，以避免命名冲突。
使用 `mapState` 等辅助函数	在组件中使用 `mapState`、`mapMutations`、`mapActions` 和 `mapGetters` 辅助函数，可以更方便地访问模块的属性，并且可以减少模板中的代码量。
避免过度嵌套模块	虽然 modules 可以嵌套，但过度嵌套会导致代码难以理解和维护。建议保持模块的层级结构简单清晰。
充分利用 `rootState` 和 `rootGetters`	在模块内部，可以通过 `rootState` 和 `rootGetters` 访问根 Store 的状态和 getters，从而实现模块之间的通信。
清晰的命名规范	采用清晰的命名规范，可以提高代码的可读性和可维护性。例如，可以使用模块名称作为 mutation 和 action 名称的前缀。
编写单元测试	为每个模块编写单元测试，可以确保模块的功能正确性，并且可以减少维护成本。
利用模块进行代码复用	如果多个模块需要使用相同的状态或逻辑，可以将其提取到一个单独的模块中，并在其他模块中引用它。

Modules 和 Namespacing：项目复杂度的降维打击

通过 modules 和 namespacing，我们可以将复杂的 Vuex Store 分割成更小的、更易于管理的模块，从而提高代码的可维护性和可扩展性。掌握这些技巧，你就能在大型 Vue 项目中游刃有余，轻松应对复杂的状态管理挑战。

Vuex 模块化与命名空间：驾驭复杂状态的利器

发表回复 取消回复

发表回复取消回复