Question

假设我正在使用与Machine对象一起使用的外部API。您可以使用Machine创建一个createMachine，这将为您提供一个具有多个嵌套属性的复杂对象，以及一组用于更改该对象状态的函数。 API提供了例如：loadMemory，sleep，connectDevice。（想象一下类似的事情，这只是一个例子）。

我想维护一个全局Vuex Machine对象，所以我有一个动作来分派初始创建并存储返回的对象，就像：

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对象，我想将它们包装在动作中。

一个动作可以调用

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

Answer 2

一种方法是使用lodash cloneDeep，它将复制应用程序的属性和对象的方法

import _ from lodash

this.state.machine.loadMemory(mem.addr)
const copyMachine = _.cloneDeep(this.state.machine)
this.$store.commit('setMachine', copyMachine)

Vuex：处理复杂的对象和状态更改功能

2 个答案: