javascript - Vuex:处理复杂对象和状态改变函数

Question

假设我正在使用一个与 Machine 对象一起工作的外部 API。您可以使用 createMachine 创建一个 Machine，这将为您提供一个具有多个嵌套属性的复杂对象，以及一组用于更改该对象状态的函数。 API 提供例如:loadMemory、sleep、connectDevice。 (想象任何类似的东西，这只是一个例子)。

我想维护一个全局 Vuex Machine 对象，所以我有一个操作来分派(dispatch)初始创建并存储返回的对象，就像这样:

actions: {
createChannel({ commit, state }, params) {
      m.createMachine(params).then(
        function (newMachine) {
          commit('setMachine', newMachine);
        }
      ).catch(err => { console.error("Error"); } )
    }
}

在这种情况下，突变非常简单:

  setMachine(state, machine) {
      state.machine = machine;
    }

现在，我们知道为“机器”对象设置的 API 有一堆状态修改调用——我们不知道它们更改了哪些特定字段——。当它们修改状态时，我想用它们来影响 Vuex 存储中的全局 Machine 对象，我想将它们包装在操作中。

一个 Action 可以调用

this.state.machine.loadMemory(mem.addr)

但是如果这个调用本身修改了 machine 对象，我该如何提交新状态？我应该克隆旧对象，应用状态更改方法并替换对象吗？

我知道克隆不是一件容易的事。

谢谢。

Answer 1

您可以重新安装您的复杂对象。根据示例，突变可能是:

loadMemory(state, newAddr) {
  const { machine } = state;

  state.machine = {
    ...machine, // set all machine's properties
    addr: newAddr,
  };
}

它适用于您想要的任何级别的嵌套对象。另一个例子:

loadMemory(state, newValue) {
  const { machine } = state;
  const { machineObjProp } = machine; 

  state.machine = {
    ...machine, // set all machine's properties
    machineObjProp: {
       ...machineObjProp, // set all machineObjProp's properties
       value: newValue,
    },
  };
}