Vuex |能够在突变之外进行更新答案

【问题标题】：Vuex | Be able to update outside of a mutationVuex |能够在突变之外进行更新
【发布时间】：2021-12-13 14:04:55
【问题描述】：

我正在尝试更新通过 Vuex 控制的操作的状态。我最初知道，如果不直接通过突变进行操作，我将无法更新操作的状态。但是，我真的不想这样做，因为我试图在回调中使用它。所以我试图克隆这个动作数组，然后使用这个变量。但是，这似乎会产生相同的错误：

不要在突变处理程序之外改变 vuex 存储状态

每当我的模态发生变化时，我都会添加一个观察者，它会检查模态是否有动作以及是否使用 for 循环将其“克隆”到局部变量。

@Watch('modal')
onModalChanged(modal: ModalData) {
    if (modal && modal.actions) {
        for (let i = 0; i < modal.actions.length; i++) {
            this.actions[i] = modal.actions[i];
        }
    }
}

然后我的模板中有一个v-for 循环，它循环通过操作局部变量并执行@click。

在构建模态时，动作设置如下：

modalStore.show({
  ...,
  actions: [
    {
      text: 'Save',
      theme: 'positive',
      click: (action: Action) => {
    
      }
    }
  ]
});

在点击方法中，我希望能够设置动作的加载状态，即

click: (action: Action) => {
  action.loading = true;
}

这样，我可以确定按钮是否应该显示加载状态，但这就是问题所在，因为我得到了 do not mutate vuex 存储。

我是否必须经过一个状态，因为这是模态，可能有多个，这意味着我必须制作如下方法：

updateButtonState(modal: ModalData, actionIndex: number, loading: boolean) {
  modal.actions[actionIndex].loading = true;
}

但在创建模态时，我没有为模态传递的参考。

是否有解决方法或更好的方法来解决这个问题？

action.loading = true 的最小方法将是理想的，尽管我知道这可能无法实现。

【问题讨论】：

标签： javascript typescript vue.js vuex

【解决方案1】：

首先，您现在应该知道对象（数组也是对象）是通过链接而不是值来应对的。因此，如果您想复制一个数组，您应该制作这个this.copy = [...this.original]，然后您将能够更改复制数组，而无需从商店更改原始数组。但是，如果您还需要在商店中对其进行更新，唯一的方法就是使用突变进行更新。在这个突变中，你可以传递一个带有数组索引的对象，你可以保存的值等等。

【讨论】：