vue.js - Vuex - 忽略变异处理程序并始终直接改变商店数据是个好主意吗？

Question

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

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

问题是，如果所有组件直接改变存储数据而不使用突变处理程序(调试除外)，您实际上会失去什么？

像这样，例如:

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
  }
}

对话框.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

商店.js

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

// NO MUTATIONS AND ACTIONS NEEDED

Answer 1

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

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