Vuex getter 未更新
Posted
技术标签:
【中文标题】Vuex getter 未更新【英文标题】:Vuex getter not updating 【发布时间】:2017-04-13 03:17:07 【问题描述】:我有以下吸气剂:
withEarmarks: state =>
var count = 0;
for (let l of state.laptops)
if (l.earmarks.length > 0)
count++;
return count;
在一个组件中,这个计算属性派生自那个 getter:
withEarmarks() return this.$store.getters.withEarmarks; ,
返回的值是正确的,直到我更改了笔记本电脑数组中的一个元素,然后 getter 没有更新。
【问题讨论】:
您如何在laptops
数组中进行更改,您能否包含该代码。
@saurabh 这两种方法我都试过了:state.laptops[index] = laptop;
和 state.laptops[index] = Object.assign(, laptop);
【参考方案1】:
在您的情况下,state.laptops.earmarks
是一个数组,您正在通过其数组索引 state.laptops[index]
对其进行操作。 Vue 无法对状态数组上的突变做出反应(按索引)。该文档为此提供了 2 个解决方法:
// 1. use purpose built vue method:
Vue.set(state.laptops, index, laptop)
// 2. splice the value in at an index:
state.laptops.splice(index, 1, laptop)
虽然它已记录在案,但我认为该页面上的巨大霓虹发光标志说“如果你不知道这一点,你将浪费数小时的生产力”将是一个很好的补充。
您可以在此处阅读有关此“警告”的更多信息:https://vuejs.org/v2/guide/list.html#Caveats
【讨论】:
state.laptops = [laptop, ...state.laptops]
实际上是这个的忠实粉丝。 [laptop, ...state.laptops]
基本上是 unshift
而 [...state.laptops, laptop] 是 push
。
我对用作地图的对象和更改属性有类似的问题。做一个state.map = _.clone(state.map)
对我有用。
这是对这个问题的一个很好的总结:> 如果你不知道这一点,你将浪费数小时的生产力"
“巨型霓虹发光标志”哈哈,太真实了。感谢 SO 的存在。【参考方案2】:
除了反应性问题和 Vue 警告之外,可能还有另一个原因,您在计算函数中引入了局部变量 counter
,您可以尝试使用给定的 reduce
函数。
withEarmarks: state =>
return state.laptops.reduce((acc, item) =>
if(item.earmarks.length > 0)
acc++;
return acc;
, 0);
除了这个答案之外,还要考虑@jpschroeder 的答案。
【讨论】:
一个常见的错误也是状态变量在加载时没有被初始化。它经常发生在我身上。即:在加载 Vuex 时,state.laptops 必须存在于状态中。以上是关于Vuex getter 未更新的主要内容,如果未能解决你的问题,请参考以下文章