我想通过在 Vue 组件中观察它来检测 vuex 状态值的变化。我目前正在使用带有组合 API 的 vue 3。我试过这种方法:
setup(props) {
const store = useStore();
watch(store.getters.myvalue, function() {
console.log('value changes detected');
});
return {
myvalue: computed(() => store.getters.myvalue)
}
},
但是在更改 myvalue 时不会调用控制台日志语句。
最佳答案
我认为您可能需要传递一个返回 myValue
的函数getter 而不是传递 myValue
setter/getter 。
像这样:
setup(props) {
const store = useStore();
watch(()=>store.getters.myvalue, function() {
console.log('value changes detected');
});
return {
myvalue: computed(() => store.getters.myvalue)
}
},
这是一个工作示例:const store = Vuex.createStore({
state() {
return {
count: 0
}
},
getters: {
count(state) {
return state.count
}
},
mutations: {
increment(state) {
state.count++
}
}
});
const app = Vue.createApp({
setup() {
const store = Vuex.useStore();
Vue.watch(() => store.getters.count, function() {
console.log('value changes detected');
});
store.watch((state, getters) => getters.count, () => {
console.log('value changes detected via vuex watch');
})
return {
myvalue: Vue.computed(() => store.getters.count),
change: ()=>{store.commit('increment')}
}
}
});
app.use(store);
app.mount("#app");
<script src="https://unpkg.com/vue@3.0.3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vuex@4.0.0/dist/vuex.global.js"></script>
<div id="app">
<button @click="change">💎</button>
{{myvalue}}
</div>
然而,有更多特定于 Vuex 的方法可以做到这一点,例如使用 Vuex
watch
(或 subscribe
)。示例和更多详细信息的链接:Watch for Vuex State changes!
关于vue.js - Vue3 组合 api watch 存储值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67775761/