vue2 observable mapGetters更新问题

Question

您好我通过mapGetters结果进行iterrating有问题。

我的代码如下：

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

之后，当我通过商店进行故障并更改任何内容时，它会更改状态中的参数，并且会对我的所有应用状态产生影响。我需要更改＆＃39; copy＆＃39;这个吸气剂，但它也应该是可观察的。

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

我怎样才能实现这个目标？

Answer 1

这是一个典型的商店获取者：

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

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

有两种方法可以阻止对象通过传递的getter进行更新。

1. 不要对其进行更改，只需在需要更改时根据需要引用或复制值。
2. 在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));
  }