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

Posted

技术标签:

【中文标题】Vuex 状态数组对象的计算属性【英文标题】:Computed properties on Vuex state array objects 【发布时间】:2019-04-23 12:30:30 【问题描述】:

这个问题可能也适用于一般的 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 有可能吗?

【问题讨论】:

你找到解决办法了吗? 你是否通过突变来改变数组?我认为按照您最初的想象来做这件事,因为它的时间和复杂性是不值得的。但是最简单的方法是当您设置此数据时,您还可以在状态下仅使用计算值创建另一个数组,并在突变或设置数据的任何位置添加数字/乘数对和计算值到两个数组,这将产生你想要的结果,而以一些额外空间为代价的计算量要少得多。 【参考方案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>

【讨论】:

这适用于单个组件,但 Vuex 的好处之一是跨多个组件管理全局状态。您必须在需要使用它的每个组件中实现该计算属性。我希望有某种不违反 DRY 原则的解决方案:) 所以你需要一个动作和/或一个突变。动作是一个全局方法,可以从任何地方调用。因此,我的答案中的示例方法可以在您的商店中进行操作。如果你想真正改变你的状态,那么你需要一个突变。如果您想回答最后两点,您可能需要在问题中包含一个用例。

以上是关于Vuex 状态数组对象的计算属性的主要内容,如果未能解决你的问题,请参考以下文章

如何循环遍历传递给具有 Vuex 存储和计算属性的组件的对象数组?

在 Vuex 中基于状态属性进行计算的正确方法是啥?

Vuex--getters属性的使用

编辑从计算属性返回的数组中的对象

vuex - 辅助函数学习

VueX 突变有效,但组件计算属性无效