Vuex 使用指南：巧用 Mutation、Action 与 Module，打造高效状态管理

2023-11-11 01:14:00

Vuex 的核心概念

在 Vue.js 应用中，状态管理是至关重要的，它可以帮助我们集中管理应用程序的数据，使数据在各个组件之间共享。Vuex 是一个专门为 Vue.js 开发的、用于集中式状态管理的库。Vuex 通过 Mutation、Action 和 Module 等核心概念，为我们提供了强大的状态管理工具，帮助我们轻松构建和维护复杂的状态管理逻辑。

Mutation

Mutation 是 Vuex 中用于修改状态的唯一途径，它本质上是一个函数，接受一个状态对象作为参数，并返回一个新的状态对象。Mutation 必须是同步的，这意味着它必须立即执行，并且不能包含任何异步操作。

Mutation 的典型用法如下：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

在上面的代码中，我们定义了一个名为 increment 的 Mutation，当被调用时，它会将 state.count 的值加 1。

Action

Action 也是一个函数，但它与 Mutation 的不同之处在于，它可以包含异步操作。Action 通常用于处理复杂的业务逻辑，例如从服务器端获取数据或提交表单。

Action 的典型用法如下：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

在上面的代码中，我们定义了一个名为 incrementAsync 的 Action，当被调用时，它会延迟 1 秒后提交一个 increment Mutation。

Module

Module 是 Vuex 中用于组织和管理状态的一种方式。Module 本身也是一个 Vuex 实例，它拥有自己的状态、Mutation、Action 和 Module。

Module 的典型用法如下：

const store = new Vuex.Store({
  modules: {
    counter: {
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      },
      actions: {
        incrementAsync ({ commit }) {
          setTimeout(() => {
            commit('increment')
          }, 1000)
        }
      }
    }
  }
})

在上面的代码中，我们定义了一个名为 counter 的 Module，它拥有自己的状态、Mutation 和 Action。