如何将数据从 Vuex 状态克隆到本地数据？答案

【问题标题】：How can I clone data from Vuex state to local data?如何将数据从 Vuex 状态克隆到本地数据？
【发布时间】：2019-03-05 23:53:17
【问题描述】：

如何将数据从 vuex 状态克隆到本地数据属性？

州

this.tsStore.shemes

数据属性

data () {
  return { shemes: [] }
}

我已经尝试在更新的 () this.shemes = this.tsStore.shemes 中执行此操作，但它似乎还剩下一个绑定.. 因为当我在单击时删除 this.shemes 中的一个项目时，我也删除了该状态下的那个项目并且得到“Do not mutate vuex store state outside mutation handlers”的错误。

我需要克隆状态并使用该数据执行我需要做的任何事情，同时不要影响我的状态状态。

【问题讨论】：

标签： vue.js vuejs2 vuex

【解决方案1】：

data(){
  return {
    shemes: null,
  }
},
beforeMount() {
  this.shemes = this.stateShemes
},
computed: {
  stateShemes() { return this.tsState.shemes }
  // OR that's how I do
  stateShemes() { return this.$store.getters['shemes'] }
}

更新

因此，您可以通过使用计算变量从您的状态中获得一些价值。您不能只分配存储在 data() 块中的值。所以你应该在Mount之前做。这样，如果您有 shemes 变量的观察者，它不会在分配计算值时触发。如果你把它放在mounted()钩子里，watcher就会触发。

另外，你能解释一下为什么你使用这个调用this.tsState.shemes而不是this.$store.getters.shemes吗？

【讨论】：

仅仅发布一些代码并不是很有帮助。你能解释一下你的代码吗？这样其他人就可以理解并从您的答案中学习，而不仅仅是从网络上复制和粘贴一些代码。
对不起。更新了我的答案。
tsState 是一个 mapState
@nahoj 你试过我回答吗？如果您有任何问题，请随时问我。
我做到了，它似乎可以工作，但是当我尝试根据点击事件 Do not mutate vuex store state outside mutation handlers 从 this.shemes 删除/删除项目时出现此错误我正在尝试删除this.shemes 中的第一项，函数为 shift()

【解决方案2】：

试试

this.shemes = JSON.parse ( JSON.stringify ( this.tsStore.shemes) )

这将克隆存储中数组中的所有值和对象。

【讨论】：

谢谢，它有效！我应该把它放在哪里，计算的还是创建的？
刷新浏览器时，this.shemes好像是空的
data() 变量只能在组件挂载后访问。尝试在mounted()中调用它
console.log( JSON.stringify ( this.tsStore.shemes) ) 并检查字符串化过程。它应该在控制台中向您显示方案
刷新是空的，但是可以从Vue控制台看到数据

【解决方案3】：

您需要创建一个新数组。 this.tsStore.shemes 为您提供对绑定数组的引用。您可以尝试使用扩展运算符或 arr.slice() 创建具有相同内容的新数组。请注意，这是一个浅拷贝。

this.shemes = [...this.tsStore.shemes]

或

this.shemes = this.tsStore.shemes.slice()

【讨论】：

传播运算符的作用就像一个魅力。浅拷贝确保原始状态数据不受影响。
这个问题……它只适用于您正在克隆的对象的直接属性。如果您正在克隆的对象具有嵌套属性，并且这些嵌套属性也具有来自状态的 getter/setter，则它不起作用。这是一个非常好的选择，只是不适用于我在数组中的对象的情况，其中数组是被监视对象的属性。

【解决方案4】：

使用cloneDeep还是the best way to go，这里是一个例子

<script>
import { cloneDeep } from 'lodash-es'

...
const properlyClonedObject = cloneDeep(myDeeplyNestedObject)
...
</script>

它是防弹的，久经考验的，也是一个可摇树的功能。

如果您在 Nuxt 上需要这个，这里是achieve this 的方法。

【讨论】：

是否有特殊原因使用 'cloneDeep' 而不是使用 JSON.parse(JSON.stringify(...)) 创建深层副本？
@mo3n 这在我的the best way to go 链接中有解释！