Vuex：处理复杂对象和状态改变函数答案

【问题标题】：Vuex: working with complex objects and state-changing functionsVuex：处理复杂对象和状态改变函数
【发布时间】：2019-12-05 02:13:09
【问题描述】：

假设我正在使用与 Machine 对象一起使用的外部 API。您可以使用createMachine 创建一个Machine，这将为您提供一个具有多个嵌套属性的复杂对象，以及一组用于更改该对象状态的函数。 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 对象，我该如何提交新的状态呢？我应该克隆旧对象，应用状态更改方法并替换对象吗？

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

谢谢。

【问题讨论】：

标签： javascript vue.js vuex

【解决方案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,
    },
  };
}

【讨论】：

【解决方案2】：

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

import _ from lodash

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

【讨论】：