vue3 监听vuex
时间: 2024-07-30 18:01:26 浏览: 177
Vuejs监听vuex中值的变化的方法示例
5星 · 资源好评率100%
在Vue 3中监听Vuex的状态变化,通常使用`mapGetters`、`mapState`或者直接在组件内通过计算属性结合`watch`来实现。以下是几种常见的方法:
1. **使用 `mapGetters`**:
如果你想在组件内部获取并监听某个 Vuex store 的状态,可以在 `setup()` 函数中这样做:
```javascript
import { mapGetters } from 'vue3-composition-api';
setup() {
const count = mapGetters('counter', 'count');
watch(() => count, () => console.log('Count has changed'));
return { count };
}
```
这里,`mapGetters` 将 vuex 中的 getter 映射到组件的局部变量上,并自动更新。
2. **使用 `mapState` (推荐) 或者 `ref` + `watch`**:
`mapState` 已经过时,在 Vue 3中更推荐使用 `reactive` 和 `ref` 结合 `watch`:
```javascript
import { reactive, ref, watch } from '@vue/composition-api';
const state = reactive({ count: getters.counter.count });
const countRef = ref(state.count);
watch(countRef, (newCount) => {
console.log('Count has changed:', newCount);
});
```
这样可以更灵活地管理响应式数据。
3. **订阅 Vuex Store**:
对于更深层次的监听,你可以使用 `store.subscribe` 或 `store.watch`:
```javascript
store.subscribe((mutation, state) => {
if (mutation.type === 'UPDATE_COUNT') {
console.log('Count updated in Vuex store');
}
});
```
阅读全文