Vuex 系列（二）：模块化应用与优雅拆分

2024-01-07 20:42:46

前言

上一篇文章我们简单介绍了一下 Vuex 的简单使用，但随之也会产生一个问题。由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用逐渐复杂，状态越来越多时，这种单一的存储方式就会带来一些问题：

代码难以维护： 当状态过多时，代码会变得难以理解和维护，尤其是当多个开发者同时开发同一个项目时，很容易产生冲突和错误。
代码复用性差： 单一的状态树使得代码复用性很差，当我们需要在不同的组件中使用相同的状态时，就需要在每个组件中都重复定义该状态。
性能问题： 当状态过多时，也会对性能产生一定的影响，尤其是在一些大型应用中，状态更新可能会导致整个应用的重新渲染。

为了解决这些问题，Vuex 提供了模块化应用的开发方式。通过模块化，我们可以将应用的状态拆分成多个小的模块，每个模块管理自己的状态，这样就可以大大提高代码的可维护性和代码复用性，同时还能减少性能的影响。

模块化应用的实现

要实现模块化应用，我们需要在 Vuex 中定义多个模块，每个模块负责管理自己的状态。我们可以使用 Vuex.Store 的 module 方法来定义一个模块，如下所示：

const store = new Vuex.Store({
  modules: {
    user: {
      state: {
        name: 'John Doe',
        age: 30
      },
      mutations: {
        setName(state, name) {
          state.name = name
        },
        setAge(state, age) {
          state.age = age
        }
      },
      actions: {
        setNameAsync({ commit }, name) {
          setTimeout(() => {
            commit('setName', name)
          }, 1000)
        }
      },
      getters: {
        fullName(state) {
          return `${state.name} ${state.age}`
        }
      }
    },
    product: {
      state: {
        list: []
      },
      mutations: {
        setList(state, list) {
          state.list = list
        }
      },
      actions: {
        fetchList({ commit }) {
          axios.get('/api/products').then(res => {
            commit('setList', res.data)
          })
        }
      }
    }
  }
})