在路由组件之间切换时,Vuex getter的值不会更新的原因是因为Vuex的getter是基于状态的计算属性,而不是响应式的数据。当路由组件切换时,Vuex的状态仍然保持不变,因此getter的值也不会更新。
要解决这个问题,可以使用Vuex的watch来监听状态的变化,并在状态变化时手动更新getter的值。具体步骤如下:
// store.js
const store = new Vuex.Store({
state: {
// 状态值
count: 0
},
getters: {
// getter
getCount: state => state.count
},
mutations: {
// 修改状态值的方法
increment(state) {
state.count++
}
}
})
// MyComponent.vue
export default {
computed: {
// 使用getter获取状态值
count() {
return this.$store.getters.getCount
}
},
watch: {
// 监听状态的变化
'$store.state.count'(newVal) {
// 手动更新getter的值
this.$store._vm.$watch(() => this.$store.getters.getCount, () => {}, { immediate: true })
}
}
}
通过以上步骤,当路由组件切换时,Vuex getter的值会自动更新。
推荐的腾讯云相关产品:无
参考链接:
领取专属 10元无门槛券
手把手带您无忧上云