常规使用使用
computed: {
...mapGetters({
get_labelList: "label/get_labelList",
select_labelList:'label/select_labelList'
}),
遇到问题
按道理来说没有问题,计算属性缓存,mapGetters也是有缓存功能,数据改变,正常就该显示
但是结果却相反,computed值有改变,但是视图层没有改变
造成原因
网上查找了一番,给出的解释是由于 JavaScript 的限制,Vue 不能检测以下变动的数组
解决思路
数组有一些方法可以导致视图更新,修改值是set与splice,set我试了没成功,希望好心人可以告诉我为啥呢?
失败的
this.$set(state.labelList[tagsIndex].tags,idx,tag)
Vue.set(state.labelList[tagsIndex].tags,idx,tag)
成功的,是使用splice
state.labelList[tagsIndex].tags.splice(idx,1,tag)
本文探讨了在Vue中遇到计算属性computed与Vuex状态管理库结合使用时,视图未随数据变化更新的问题。尽管Vue和mapGetters都有缓存机制,但在处理数组时,由于JavaScript的限制,Vue无法检测某些数组变化。文中提到,通过`Vue.set`或`splice`方法可以触发视图更新,但`Vue.set`在示例中未成功。最终,使用`splice`成功实现了视图的更新。
1万+

被折叠的 条评论
为什么被折叠?



