Vuex | 能够在突变之外更新

Question

我正在尝试更新通过 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循环，它循环遍历 actions 局部变量并执行@click 。

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

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

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

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

通过这种方式，我可以确定按钮是否应该显示加载状态，但这就是问题所在，因为我得到了不改变 vuex 存储。

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

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

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

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

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

Answer 1

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