两个不相干的组件,现在有一个业务是让这俩不相干组件之间产生交互,最便捷的就是一个组件往vuex里传值,另一个组件去取值。在vuex里需要定义一个默认值,传值的组件需要重新给vuex里数据赋值,而取值的组件需要获取动态变化的新值。但是vue渲染的时候获取的只是默认值,vue不是响应式的,即使vuex里的数据动态变化了,vue里的还是一开始的默认数据。以下是解决办法。
如:vuex里的数据是 state:{
num : 0
}
动态让数据变成1 this.$store.commit('num', 1);
mutations: {
focusNum(state, payload) {
state.num = payload
}
用 $store.state.num 取这个值 // 打印为0
如何取动态变化的值 需要用到侦听器
watch: {
'$store.state.num' : function(val) {
console.log(val) // 打印为 1
}
}
ps:如果有帮助到您的话,不妨点个赞