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

Question

这个问题可能也适用于一般的 Vue，但我在我的项目中使用 Vuex。

我的商店中有一组对象，我想为其计算属性。

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

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

现在，我希望对 numbers 数组的每个对象都有一个计算属性，结果是 num * multiplier（例如 2*3 = 6, 5*10 = 50）

一种解决方案是创建一个返回数字数组的计算属性，加上计算字段...例如：

const getterrs = {
    num_list(state){
        const list = state.numbers
        list.map(n=>{
            n.value=n.num*n.multiplier;
        );
        return list;
    }
}

这可行，但有几个问题：

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

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

Vue/Vuex 有可能吗？

Answer 1

您可以在使用它的组件中对您的商店数据进行任何计算。我会让您的 getter 简单地返回 numbers 数组：

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>