vue2 observable mapGetters 更新问题答案

【问题标题】：vue2 observable mapGetters updated issuevue2 observable mapGetters 更新问题
【发布时间】：2018-05-07 14:13:41
【问题描述】：

我在迭代 mapGetters 结果时遇到问题。

我的代码如下：

...mapGetters({
    'shop' : 'getShops'
})

之后，当我遍历商店并更改任何内容时，它会更改我的状态参数，并影响我的所有应用程序状态。我需要更改此 getter 的“副本”上的参数，但它也应该是可观察的。

我尝试将 mapGetters 结果分配给计算变量，但它也更新了状态

我怎样才能做到这一点？

【问题讨论】：

【解决方案1】：

这是一个典型的 store getter：

const state = {
  obj: {count:1}
}
const getters = {
  obj: (state) => {
    return state.obj
  }
}

如果您通过mapGetters 或直接通过$store.state.obj 调用商店，您将获得对象本身通过。 javascritp 提供的对象不是不可变的，而 js 中对象的本质是，如果您在将对象传递给组件时对其进行更改，它也会在存储中更新。

有两种方法可以防止对象不通过传递的 getter 更新。

我个人只使用过方法1，但是如果您需要返回副本进行更改（2），您可以使用其中任何一种来创建副本

使用 ES6 扩展运算符（不是深拷贝）

  objCopy: (state) => {
    return {...state.obj};
  }

对于 ES6 也是一个不错的选择（不是深拷贝）：

  objCopy: (state) => {
    return Object.assign({}, state.obj});
  }

或 ES5 方式，它创建一个深拷贝（这样孩子、孙子等就不会屈服于同样的问题）

  objCopy: (state) => {
    return JSON.parse(JSON.stringify(state.obj));
  }

【讨论】：