如何监听Vuex数据的变化？

• 使用watch方法监听Vuex state的变化：

// 在 Vue 组件中
this.$store.watch(
  (state) => state.someState,
  (newValue, oldValue) => {
    console.log('someState changed from', oldValue, 'to', newValue);
  }
);

• 使用subscribe方法监听mutation的变化：

// 在 Vuex store 中
store.subscribe((mutation, state) => {
  console.log('mutation.type:', mutation.type);
  console.log('mutation.payload:', mutation.payload);
});

• mapState / mapGetters和组件的watch结合使用：
  如果你想监听Vuex中某个模块的具体状态，可以结合mapState或mapGetters和Vue组件的watch方法，代码更加简洁和模块化

// 在 Vue 组件中
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      someState: state => state.someModule.someState
    })
  },
  watch: {
    someState(newValue, oldValue) {
      console.log('someState in module someModule changed from', oldValue, 'to', newValue);
    }
  }
};

• subscribeAction方法监听action的触发：
  如果你对action 的触发感兴趣可以使用Vuex提供的subscribeAction方法来监听action的触发

// 在 Vuex store 中
store.subscribeAction((action, state) => {
  console.log('action.type:', action.type);
  console.log('action.payload:', action.payload);
});

• Custom Plugin：
  有时候你需要在Vuex中进行更高级的监听和操作，可以考虑编写一个自定义的Vuex插件

// 定义一个插件
const myPlugin = store => {
  // 当 store 的 mutation 被提交时调用此函数
  store.subscribe((mutation, state) => {
    // mutation.type     -> mutation 的类型
    // mutation.payload  -> 传递给 mutation 的载荷
    console.log(`Mutation type: ${mutation.type}`);
    console.log(`Mutation payload: ${mutation.payload}`);
    console.log(`Current state: `, state);
  });
};

// 创建 Vuex store 并注册插件
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  plugins: [myPlugin]
});

// 提交 mutation
store.commit('increment');
// 控制台将打印出 mutation 的类型、载荷和当前 state