Vue.js Vuex-忽略变异处理程序并始终直接变异存储数据是一个好主意吗？

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

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

问题是，如果所有组件在不使用变异处理程序（调试除外）的情况下直接变异存储数据，那么实际上会损失什么

比如说：

App.vue

创建新项目

方法：{
createNewItem（参数）{
//设置对话框数据
这是。$store.state.dialogs.createNewItemDialog.data={
…此.$store.state.dialogs.createNewItemDialog.data，
…参数
}
//打开对话框
此值为.$store.state.dialogs.createNewItemDialog.isopend=true
}
}

对话框.vue

创建新的{{$store.state.dialogs.createNewItemDialog.data.type}
关闭对话框

//不需要计算属性

store.js

状态={
对话：{
createNewItemDialog：{
值：false，
数据：{
键入：“文件”，
名称：“”，
扩展名：“”
}
} 
}
}
//不需要突变和动作

我记得，当我们意外地让$store中的变量直接引用时，生产中出现了错误，我不记得真正的问题是什么，也许这只是巧合

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

问题是，如果所有组件在不使用变异处理程序（调试除外）的情况下直接变异存储数据，那么实际上会损失什么

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

问题可能是。你到底需要什么？ 如果是反应式全局

对话框

说明您需要。那你就可以这样用了

---

但是，Vuex可能是一种过度杀伤力。

是的，如果不在store.js config对象中设置

strict:false

，就会出现变异错误，但这是意料之中的，我正在试图弄清楚是否确实需要使用变异处理程序，或者这只是变异数据的“首选方式”。我理解你关于变异相关属性的观点，但我也可以直接变异。我不知道的是，我是否可以完全避免突变处理程序，并始终直接突变存储数据。我正在开发一个大型应用程序，因此我必须对一些复杂的突变使用Vuex操作，但当涉及到较小的突变时，如在示例中，我正在考虑切换到直接突变，因此，我不必为每个对话框的嵌套属性创建10个计算属性和10个存储突变，也不必创建一个生成器来动态创建这些计算属性和突变。但我的问题是——当我转向直接突变时，我会失去什么功能？除了调试变得更加困难之外，所有功能是否都能正常工作？我发现您会失去的一件事是：vue devtools Vuex调试信息。更新不会出现在那里。是的，如果这就是我所失去的，那么这是一个非常好的折衷，因为直接突变使组件更干净。要使用变异处理程序，我必须为每个state属性的每个嵌套属性拥有一个单独的计算属性+一个存储变异（根据Vuex的官方指南），如果不创建计算/变异属性生成器，这需要数千行代码