从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法

对于从Vuex中取出数组赋值给新的数组，在进行push操作时报错通常是因为新数组被赋值时使用了浅拷贝，这会导致新数组和旧数组指向同一块内存地址，在新数组push时会影响到原来的数组，从而导致该错误的产生。以下是完整的解决方法攻略：

1.使用深拷贝

使用深拷贝可以解决浅拷贝的问题。在JavaScript中可以使用JSON.parse(JSON.stringify(array))进行深拷贝。

举个例子，如下所示：

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['myArray']),
    newArray() {
      return JSON.parse(JSON.stringify(this.myArray))
    }
  },
  methods: {
    pushItem() {
      this.newArray.push({ name: '新元素' })
    }
  }
}

2.使用slice方法

可以使用Array原型上的slice方法来进行数组的浅拷贝。slice方法可以返回一个新的数组，不会对原来的数组做任何影响。

举个例子，如下所示：

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['myArray']),
    newArray() {
      return this.myArray.slice(0)
    }
  },
  methods: {
    pushItem() {
      this.newArray.push({ name: '新元素' })
    }
  }
}

以上两种方法都可以解决从Vuex中取出数组赋值给新的数组,新数组push时报错的问题。使用前者可以进行深拷贝，使用后者则可以进行浅拷贝。