vue3 如何监听vuex数据

在 Vue 3 中，如果你想监听 Vuex 的状态或 mutations，你可以通过 `watch`、`mapGetters` 或者更推荐的 `reactive` 和 `Computed` 结合 `ref` 来实现。以下是三种常见的方法：

1. **Watcher**:

import { watch } from 'vue';
import { getters } from yourVuexModule;

// 使用 watch 监听 getters
const currentValue = ref(getters.someGetter);
watch(currentValue, (newVal) => {
  console.log('新值:', newVal);
});

2. **MapGetters**:
在组件选项中，使用 `mapGetters` 将 Vuex 计算属性绑定到组件的响应式实例上，这样变化会自动触发视图更新：

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['someGetter']),
    // 然后在模板中使用 this.someGetter
  },
};

3. **Computed & Ref**:
使用 `computed` 和 `ref` 进行手动计算和监听：

import { reactive, ref } from 'vue';
import { getters } from yourVuexModule;

const storeData = reactive({}); // 或从 store 中导出 ref
storeData.someProperty = getters.someGetter; // 初始化并绑定

// 当状态变化时
storeData.$watch('someProperty', (newValue) => {
  console.log('新值:', newValue);
});