浅谈vuex为什么不建议在action中修改state

下面为您详细讲解“浅谈vuex为什么不建议在action中修改state”的攻略。

什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 基于 Vue.js 组件树的基础之上提供了一个全局的状态管理机制。

什么是Action

Action 是 Vuex 中提交 mutation 的一个异步操作。通过定义 action，我们可以在其中执行一些异步操作，然后再提交 mutation 对 store 中的状态进行修改。

为什么不建议在Action中修改State

Vuex 的核心理念是将 State 状态存储在单一的 Store 中，通过 Mutation 来修改该状态，这种方式能够使我们更好地控制数据的变化，保证了 State 的可预测性和可维护性。而 Action 作为 Mutation 的触发器，主要的作用是执行异步操作并提交 Mutation。

一般来说，我们在 Action 中执行异步操作，并在异步操作结束后提交 Mutation 来修改 State 状态。这种设计模式使得我们可以非常清晰地控制异步操作的流程，也可以确保 State 状态的一致性和可预测性。

但是，如果在 Action 中直接修改 State 状态，就会破坏这种模式。因为这样会导致 State 状态的变化不可预测，我们无法清晰地知道 State 状态是经过哪些 Action 共同修改得到的，给 Debug 和维护带来巨大的困难。

举个例子说明：

// 一个错误的 Action 中修改 State 的例子

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    // 错误的方式，在 Action 中直接修改 State 状态
    incrementAsync(state) {
      state.count++
    }
  }
})

上面的例子展示了一种错误的方式，在 Action 中直接修改 State 状态。这种方式会给 Debug 和维护带来极大的困难，因为我们无法清晰地知道 State 状态是经过哪些 Action 共同修改得到的。

下面是一个正常的 Action 中异步修改 State 的例子：

// 异步修改 State 的 Action

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

在上面的例子中，我们在 Action 中执行了异步操作，并在异步操作结束后提交了 Mutation 来修改 State 状态。这种方式既清晰又可预测，能够很好地保证 Vuex 的核心理念和设计模式。

总而言之，在 Vuex 中，我们需要遵循严格的设计模式来修改 State 状态，而 Action 应该仅作为 Mutation 的触发器，执行异步操作并提交 Mutation 来修改 State 状态，以确保 State 的可预测性和可维护性。