不使用突变直接突变Vuex状态

Question

我是为react/redux to vue而来的，在学习vuex的过程中，我发现我可以直接改变状态，状态的改变仍然反映在使用它的其他组件上。

这种行为在Redux中是被禁止的，如果我直接改变状态，其他组件将不会收到这些改变的通知，所以我们必须使用动作和缩减程序。

所有这些方法基本上都提供了相同的结果。

methods: {
    IncrementDirect () {
      // mutates the state directly
      this.$store.state.counter += 2;
    },
    incrementDispatch() {
      // mutates the state inside actions
      this.$store.dispatch("handleIncrement", 2);
    },
    incrementCommit() {
      // mutates the state inside mutations
      this.$store.commit("increment", 2);
    },
  },

我的问题是，为什么这种行为是允许的，如果我们可以在应用程序的任何地方改变状态，为什么我们必须使用mutations。

Answer 1

我认为行为可能已经改变，反应性仍然有效，而不需要使用突变。

不过，我找不到明确的证据。

由于最近引入了reactivity和proxy objects ( Vuex4/Vue3利用了它们)，将“提交”代码放在处理程序setter函数中听起来像是一项相当简单的任务。我相信这就是他们最终所做的，我找到的最接近于解释的东西是pinia。

我非常确定在Vue2/Vuex3中，直接更新状态会失败。

Answer 2

从Redux到Vuex的不同之处在于，状态更改不会创建新状态。Vue假装不变，但为了性能，实际上会改变状态，并通过反应通道跟踪突变。这是一个巧妙的技巧，但正如你所发现的，它有一些轻微的副作用。

当您直接更改状态时，例如通过组件或通过操作，您并没有使用这些官方的突变通道。我调试过看起来像这样的代码，但后来发现了错误，因为反应性并没有一直起作用，更新也没有发生。

还应该提到的是，通过Vue dev工具调试Vuex非常方便，除非您使用突变，否则不会向您显示任何状态变化。此外，如果你有任何Vuex插件，它们不会执行，除非有一个突变。

除了所有这些看起来有点模糊的技术原因之外，我觉得有必要指出这绝对不是状态变化的flux框架的方式。来自React世界，你知道状态变化应该发生在一个大的循环中；在Redux中，组件调用actions，后者调用reducer返回新的状态，然后应用该状态，应用程序并重新呈现应用程序，准备从组件进行另一次更改。框架强制命令将UI与状态解耦(尽管我认为这不是一个好主意)，并确保所有状态更改都发生在一个地方。Vuex突变也是如此-这是所有状态变化应该发生的地方。

在Vue 3中，你可以做一些非常有趣的事情，其中之一是你可以在你的Vue组件之外创建一个反应对象，将该对象作为全局状态导入到你的组件中，然后根据你的喜好对其进行修改。Vue 3将使这些突变与整个应用程序保持同步，并且通过一些规划，它可能会成为一个非常有能力的Vuex替代品。

紧随其后的是，下一代Vuex看起来可能会抛弃单独突变的概念，并可以通过操作或其他方式直接改变所有状态。我敢打赌，它将使用上面描述的Vue 3反应系统，并结合Vuex的模块组织思想来创建一个非常简单的框架。

总而言之，你的直觉在前进的道路上是正确的，但对于今天来说可能还为时过早。

Answer 3

在突变不是的情况下，操作是异步的

export default new Vuex.Store({
  state: {
    // put variables and collections here
  },
  mutations: {
    // put synchronous functions for changing state e.g. add, edit, delete
  },
  actions: {
    // put asynchronous functions that can call one or more mutation functions
  }
})

总是使用动作来提交您的突变

相关问题：Vuex Action vs Mutations、Is it bad to commit mutations without using actions in Vuex?、Direct manipulation of state within a Vuex action vs. using 'commit' and 'getters'