Vuex，在 Vue 组件中监听 Vuex 状态变化，使用watch监听Vuex中的数据

在 Vue 组件中，你可以使用 computed 属性结合 Vuex 的 mapState 或 mapGetters 辅助函数来监听 Vuex 状态的变化。另外，你也可以使用 watch 属性来监听这些状态的变化。

以下是一个使用 computed 和 watch 监听 Vuex 状态变化的示例：

<template>
  <div>{{ myState }}</div>
</template>
 
<script>
import { mapState, mapGetters } from 'vuex';
 
export default {
  computed: {
    // 使用 mapState 生成计算属性
    ...mapState({
      myState: state => state.myModuleName.myState
    }),
 
    // 或者使用 mapGetters 生成计算属性
    ...mapGetters(['myModuleName/myGetter'])
  },
 
  watch: {
    // 直接监听计算属性
    myState(newVal, oldVal) {
      // 处理状态变化的逻辑
      console.log(`State changed from ${oldVal} to ${newVal}`);
    },
 
    // 或者直接监听 Vuex 的状态
    '$store.state.myModuleName.myState'(newVal, oldVal) {
      // 处理状态变化的逻辑
      console.log(`State changed from ${oldVal} to ${newVal}`);
    }
  }
};
</script>

在这个例子中，myState 是 Vuex 模块 myModuleName 中的一个状态。我们使用 mapState 创建了一个计算属性 myState，然后在 watch 中监听这个计算属性的变化。当 Vuex 中的状态发生变化时，watch 中的监听函数会被触发。