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

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

在 typescript 和 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 的实际外观示例更新您的帖子。从错误看来，您可能不允许以您访问它们的方式访问数组中的对象。