让前端飞

使用vuex来进行组件传值通信时的问题

2018-11-01  本文已影响17人  闰土在流浪

由于vue在非父子组件间通信比较麻烦,所以使用vuex这个神器是必然的,保存在vuex里的公共数据能够轻易地实现组件间的通信。

但最近做项目过程中发现了一个问题,想要获取vuex里的数据,并且这个数据还要实时更新的话,是不能保存在data里的,必须使用computed计算属性。

而我在使用的过程中一开始是全部将数据获取保存在了data里,但没有出现问题的原因是我所写的那个组件每一次都会重新执行created生命周期钩子函数,也就是data每一次都会重新初始化,所以没有发现这个问题,但实际上data就如同一个纯粹的字面量,它只会保存第一次获取到的vuex里的值,之后是不会再进行更新的。

换句话说,也就是data里冒号右边的内容依赖更新时,冒号左边的属性值是不会变更的,仍然是初始化的时候的那个值。

而computed是依赖追踪的,它再值发生改变的时候会触发重新计算,所以想要对vuex里保存的数据进行获取操作,并且想要实时更新的话,还是使用computed属性比较稳妥。

computed:{
        topicList(){
            return this.$store.state.topicList
        } 
    }
}
上一篇 下一篇

猜你喜欢

热点阅读