浏览器 |能够在突变之外进行更新

Question

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

do not mutate vuex store state outside mutation handlers

每当我的模态发生变化时，我都会添加一个观察器，它会检查模态是否有动作，以及它是否使用 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 store。

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

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

但是在创建模态时，我没有为模态传入的引用。

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

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

Answer 1

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

浏览器 |能够在突变之外进行更新

Vuex | Be able to update outside of a mutation

javascript

typescript

vue.js

vuex