在Vue中使用this.watch()监听Vuex store模块内变量是否是最优方案？

首先明确几个常见误区 #

• 你对$watch的入参理解存在错误：Vue实例的this.$watch方法第一个参数为待监听的数据源，第二个参数为变更触发的回调函数，newValue、oldValue是回调函数的入参，而非$watch本身的入参。
• 你当前的写法无法监听到Vuex状态变化：第一个参数返回的myVariableToWatch没有绑定Vuex的状态引用，必须指向this.$store下对应模块的状态变量才能生效。

当前方案的合理性及优化方向 #

你用$watch监听Vuex状态属于常规合法方案，仅适用于单组件内需要响应状态变更做特定逻辑的场景，优化后的正确写法如下：

const unwatch = this.$watch(
  // 第一个参数返回要监听的Vuex模块状态
  () => this.$store.state.你的模块名.myVariableToWatch,
  // 回调参数为新值、旧值
  (newVal, oldVal) => {
    console.log('myVariableToWatch has changed', newVal, oldVal)
  },
  // 可选配置项
  {
    immediate: true, // 组件初始化时立即执行一次回调
    deep: true // 若监听的是对象/数组类型，需要开启深度监听
  }
)

// 若为手动调用的$watch，建议组件销毁时取消监听避免内存泄漏
// 组件实例内调用的$watch会随组件销毁自动解绑，可省略此步骤
this.$on('hook:beforeDestroy', unwatch)

更优的通用方案 #

如果多组件都需要响应这个状态，或者希望写法更符合Vue的设计惯例，更推荐用computed映射Vuex状态，再监听计算属性的变化：

import { mapState } from 'vuex'

export default {
  computed: {
    // 写法1：手动映射
    myVariableToWatch() {
      return this.$store.state.你的模块名.myVariableToWatch
    }
    // 写法2：用mapState辅助函数简化
    // ...mapState('你的模块名', ['myVariableToWatch'])
  },
  watch: {
    // 直接监听映射后的计算属性即可
    myVariableToWatch(newVal, oldVal) {
      console.log('myVariableToWatch has changed', newVal, oldVal)
    }
  }
}

该写法逻辑更清晰，也更便于后续维护。

内容的提问来源于stack exchange，提问作者Avtar