在Vue3中,你可以使用watch
函数来监听store中的数据变化。
下面是一个示例代码:
import { watch, reactive } from 'vue';
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
// 创建一个响应式的对象
const state = reactive({
count: store.state.count
});
// 监听state.count的变化
watch(() => store.state.count, (newValue) => {
state.count = newValue;
});
return {
state
}
}
}
在上述代码中,我们通过reactive
函数创建了一个响应式的对象state
,并将store.state.count
赋值给它。然后使用watch
函数来监听store.state.count
的变化,当store.state.count
发生变化时,将新的值赋值给state.count
。
最后将state
对象返回给组件,就可以在组件中使用state.count
来访问store中的数据。
需要注意的是,在Vue3中,使用Vuex的话,需要使用@next
的版本,即npm install vuex@next
。而且,使用useStore
函数来获取store实例,而不是this.$store
。