Question

我在State上有一个数组，并通过Getter获得。问题是我无法复制这些数组。我正在尝试这样做：

export default {
data() {
 ...,
 termoSelected: false,
 terms: []
},
computed: {
    ...mapGetters({
      getPaymentUtils: 'negotiationaccount/getPaymentUtils', // It returns a Array
    })
},
mounted() {
 console.log(this.getPaymentUtils.rememberOptionsCash) // Shows data OK
 this.terms = Array.from(this.getPaymentUtils.rememberOptionsCash)
},
methods: {
 checkBoxChanged (index) { // Caled when checkbox is changed with v-model termoSelected
      this.terms[index].selected = this.termoSelected // Trigger: Error: [vuex] do not mutate vuex store state outside mutation handlers.
  }
}

}

我也尝试了.slice()函数。但是不行。所以我的问题是，当我使用Getter从State获得值时，无论如何我都无法复制该数组。我该如何解决这个问题？

Answer 1

在打字稿和ES6中，您可以使用扩展运算符，例如：

this.terms = [...this.getPaymentUtils.rememberOptionsCash]

但是根据数组内部对象的深度，您将需要使用lodash中的 deepClone 之类的东西。

Answer 2

我经常使用的东西是这样的：

/**
 * Converts array-ish object to iterable.
 * This works with any object that follows these rules:
 *
 *  - `object` has a property `length` which is a positive integer or zero
 *  - for each integer `i` between 0 and `object.length`, there exists a property `object[i]`
 * @template T
 * @param {T[]|HTMLCollectionOf<T>|{length:number, [name:string]:T}} object
 * @returns {IterableIterator<T>}
 */
function* toIterable(object) {
    const l = object.length;
    for (let i = 0; i < l; ++i) {
        yield object[i];
    }
}

如果this.getPaymentUtils.rememberOptionsCash遵循上述规则，则该函数将为其提供迭代器。然后可以将其用于扩展以创建副本：

const asArray = [...toIterable(this.getPaymentUtils.rememberOptionsCash)];

我通常将其用于HTML集合和格式不正确的JSON。它的好处是您可以在不复制数组的情况下进行迭代，例如：

for(const option of toIterable(this.getPaymentUtils.rememberOptionsCash)) {
    console.log(option);
}

如果上面的代码不起作用，请使用this.getPaymentUtils.rememberOptionsCash实际外观的示例更新您的帖子。从该错误看来，您可能不被允许以访问对象的方式访问数组中的对象。

从getter的返回中使用Array.from（）从状态复制数组在Vuex上不起作用

2 个答案: