Vuex - 忽略突变处理程序并始终直接改变存储数据是个好主意吗？答案

【问题标题】：Vuex - is it a good idea to ignore mutation handlers and always mutate the store data directly?Vuex - 忽略突变处理程序并始终直接改变存储数据是个好主意吗？
【发布时间】：2021-03-10 07:17:05
【问题描述】：

与直接突变相比，使用突变处理程序需要编写数百倍的代码（在大型应用程序中，如果您遵循官方指南），因为它们需要计算属性并为每个嵌套状态属性存储突变。

我知道，理论上不使用突变处理程序会使追踪某些错误的来源变得更加困难，但在实践中，如果只有少数函数可以更改特定状态属性，则很容易确定哪个其中一个通过遵循事件逻辑导致错误，因为在大多数情况下，突变是由某种已知事件（按钮按下、输入更改等）引起的，因此当在特定事件期间出现错误时，跟踪并不难关闭导致它的函数，而不使用突变处理程序。

问题是，如果所有组件直接对存储数据进行变异而不使用变异处理程序（调试除外），你实际上会失去什么？

像这样，例如：

`App.vue`

<v-btn @click="createNewItem({ type: 'file', extension: 'txt' })">
  Create new item
</v-btn>

methods: {
  createNewItem (params) {
    // Set dialog data
    this.$store.state.dialogs.createNewItemDialog.data = { 
      ...this.$store.state.dialogs.createNewItemDialog.data,
      ...params 
    }
    // Open dialog
    this.$store.state.dialogs.createNewItemDialog.isOpened = true
  }
}

`Dialogs.vue`

<v-dialog v-model="$store.state.dialogs.createNewItemDialog.isOpened">
  <div class="title">
    Create new {{$store.state.dialogs.createNewItemDialog.data.type}}
  </div>
  <v-text-field
    v-model="createNewItemDialog.data.name"
  />
  <v-btn @click="$store.state.dialogs.createNewItemDialog.isOpened = false">
    close dialog
  </v-btn>
</v-dialog>

// NO COMPUTED PROPERTIES NEEDED

`store.js`

state = {
  dialogs: {
    createNewItemDialog: {
      value: false,
      data: {
        type: 'file',
        name: '',
        extension: ''
      }
    } 
  }
}

// NO MUTATIONS AND ACTIONS NEEDED

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

我记得当我们不小心让直接引用 $store 中的变量时，我们在生产中遇到了错误，我不记得真正的问题是什么，也许这只是一个巧合。

使用突变在一个地方处理状态变化的另一个原因。如果你有“副作用”，你可以处理这个，例如：如果你删除你的 state 属性之一，whick 可以指示删除另一个或重新计算一些东西。

【讨论】：

是的，如果你没有在 store.js 配置对象中设置strict: false，你会得到突变错误，但这是意料之中的，我试图弄清楚是否真的有必要使用突变处理程序，或者它只是改变数据的“首选方式”。我理解你关于突变相关属性的观点，但我也可以通过直接突变来做到这一点。我不知道我是否可以完全避免突变处理程序并始终直接突变存储数据。

【解决方案2】：

问题是，如果所有组件直接对存储数据进行变异而不使用变异处理程序（调试除外），你实际上会失去什么？

您将丢失 vue-devtools Vuex 调试信息。更新不会出现在那里。

问题可能是。你真正需要什么？如果它是您需要的反应性全局 dialogs 状态。然后就可以这样使用了。

但是也许 Vuex 可能会为此目的而过度杀伤。

【讨论】：

我正在开发一个大的应用程序，所以我必须使用 Vuex 动作来处理一些复杂的突变，但是当涉及到较小的突变时，例如示例中，我正在考虑切换到直接突变，所以我不必为每个对话框的嵌套属性创建 10 个计算属性和 10 个存储突变，或者创建一个动态创建这些计算属性和突变的生成器。但我的问题是——当我转向直接突变时，我会失去什么功能，除了调试变得更加困难之外，一切都会一样吗？
我发现你会丢失的一件事是：vue-devtools Vuex 调试信息。更新不会出现在那里。
是的，如果这就是我所失去的，那么这是一个非常好的权衡，因为直接突变使组件更清洁。要使用突变处理程序，我必须为每个状态属性的每个嵌套属性都有一个单独的计算属性 + 存储突变（根据 Vuex 的官方指南），如果你不创建计算/突变属性，这需要数千行代码生成器

【解决方案3】：

你会失去视角。您的应用程序现在可能很简单，但将来可能会随着您添加新功能而改变。

您已经提到了突变的一些优点。因此，如果这是一个长期项目，那么这些额外的线路可能是值得的。

【讨论】：