vue面试题：如何监听vuex中的数据变化？

方法一：计算属性

在组件中，您可以使用计算属性直接从 Vuex store 的 state 或 getters 访问状态，并且当这些依赖的状态发生变化时，计算属性也会自动更新。

computed: {
  myState() {
    return this.$store.state.myState
  }
}

当 myState 的值发生变化时，Vue 的反应性系统将确保所有依赖于 myState 的计算属性和组件都将被重新计算或重新渲染。

方法二：辅助函数

通过Vuex 提供的 mapState 和 mapGetters 辅助函数来简化组件中的状态和getters的映射。

import { mapState, mapGetters } from 'vuex'

computed: {
  ...mapState({
    myState: state => state.myState
  }),
  ...mapGetters([
    'myGetter' // 假设 store 中有一个 getter
  ])
}

方法三：订阅（Subscribe）

如果你需要在 Vuex store 之外的地方监听state的状态变化，比如在非组件的模块中，你可以使用 store.subscribe 方法。这个方法会在每次 mutation 执行后调用，并提供 mutation 的描述和状态快照。

store.subscribe((mutation, state) => {
  console.log(mutation.type);
  console.log(mutation.payload);
});

这个订阅者会收到所有的 mutation，如果你只对特定的 mutation 感兴趣，你需要在回调函数里面做进一步的判断。

总结：
监听 Vuex 中的数据变化可以通过使用计算属性监听特定的 state 或 getter、使用 Vuex 提供的 mapState 和 mapGetters 辅助函数在组件中创建反应式的状态映射，或者使用 store.subscribe 方法在 store 外部监听所有的状态变化。这些办法可以根据不同的场景需求选择使用。