时间戳

首页 > 解决方案 > Vuex：处理复杂对象和状态改变函数

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

问题描述

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

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

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 有一堆状态修改调用——我们不知道它们改变了哪些特定字段——。当它们修改状态时，我想用它们来影响MachineVuex 存储中的全局对象， 我想将它们包装在 actions 中。

一个动作可以调用

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

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

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

谢谢。

标签： javascriptvue.jsvuex

解决方案

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

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

推荐阅读