Vuex状态数组对象的计算属性

Question

这个问题通常也适用于Vue，但是我在项目中使用的是Vuex。

我的商店中有一个对象数组，我想为其提供一个计算所得的属性。

为简化起见，假设我的商店如下：

library(arrangements)
myPerms <- permutations(n)
lapply(1:nrow(myPerms), function(x) myIdentity[myPerms[x,], ])

现在，我想要一个数字数组每个对象的计算属性，以便结果为num *乘数（例如2 * 3 = 6、5 * 10 = 50）

一种解决方案是使计算所得的属性返回数字数组，再加上计算所得的字段...例如：

const state = {
    numbers = [
        {num: 2, multiplier: 3},
        {num: 5, multiplier: 10},
        {num: 1, multiplier: 6}
    ]
};

可以，但是有几个问题：

• 返回的数组不能与未计算的v-model绑定 字段

• 只要数组中的任何元素都将重新计算整个数组 数组已更改...我只想重新计算单个元素 改变了。

使用Vue / Vuex可以吗？

Answer 1

您可以在正在使用该组件的组件中对存储数据进行任何计算。我会让您的getter只需返回数字数组：

const getters = {
    num_list(state){
        return state.numbers;
    }
}

然后，您可以在组件中使用getter访问数字并按需使用它。因此，如果您想显示原始数组，可以这样获得：

computed: {
        num_list() {
            return this.$store.getters.num_list
        }
    }

并按如下所示将其显示在您的模板中：

<p>Our first number is {{num_list[0].num}} and it's multiplier is {{num_list[0].num}}</p>

如果还要计算乘法，则可以具有另一个计算属性：

multiplied() {
    return this.num_list[0].num*this.num_list[0].multiplier
}

并使用{{multiplied}}在模板中回显它。

现在，如果您的组件中有一个可以用作索引的数据元素，或者如果您有一个方法而不是一个计算属性，那么可以通过一个参数使事情变得更加灵活。 （据我所知，您不应将参数传递给计算属性）。因此，您的乘法方法将是这样：

multipliedMethod(index) {
    return this.num_list[index].num*this.num_list[index].multiplier
}

或者，如果要显示所有结果，可以使用v-for遍历num_list并即时进行任何计算：

<div v-for="(num, index) in num_list" :key="index">
  <p>{{num.num*num.multiplier}}</p>
</div>