在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
。