Vue2 Webpack项目：监听Vuex计算属性无法更新组件本地状态

嘿，我看你在Vue2项目里结合Vuex做状态管理时，想通过监听从Store getter获取的计算属性，来同步更新组件的本地状态对吧？先帮你排查下代码里的常见坑，再给你一套可行的写法～

首先你代码里的watch用了箭头函数，这是个典型的错误！箭头函数没有自己的this，它会绑定外层作用域的上下文，导致你在watch回调里没法访问组件实例的this.modal或者其他属性。下面是修正后的完整代码：

export default {
  name: 'MyComponent',
  data() {
    return {
      // UI
      modal: {
        classes: {
          'modal__show-modal': false,
        },
        tags: [],
      },
    };
  },
  computed: {
    tagList() {
      return this.$store.getters.tagList;
    },
  },
  watch: {
    // 这里必须用普通函数，不能用箭头函数！
    tagList: {
      handler(newTags) {
        // 用展开运算符做浅拷贝，避免和Vuex状态共享引用
        this.modal.tags = [...newTags];
      },
      // 可选：组件初始化时就同步一次Vuex的数据
      immediate: true,
      // 可选：如果tagList是嵌套对象/数组，需要深度监听时开启
      deep: true
    }
  }
}

关键细节说明： #

• 禁用箭头函数：在Vue的watch选项中，必须用普通函数才能让Vue自动绑定组件实例的this，这样你才能正常访问this.modal等本地状态。
• 浅拷贝避免引用问题：如果直接把newTags赋值给this.modal.tags，会让本地数组和Vuex里的数组共享同一个内存引用，后续修改本地状态可能会意外污染Vuex的全局状态，用展开运算符[...newTags]做浅拷贝能规避这个风险。如果是对象的话，可以用{...newTags}或者Object.assign({}, newTags)。
• immediate选项：默认watch只会在tagList发生变化时触发回调，如果希望组件刚挂载时就把Vuex里的初始数据同步到本地，就加上immediate: true。
• deep选项：如果你的tagList是嵌套结构的对象/数组（比如每个tag还有子属性），当嵌套属性变化时默认watch不会触发，这时候可以开启deep: true做深度监听。不过更推荐的做法是在Vuex的mutation里返回新的数组/对象（比如用map、filter等纯函数生成新数据），这样不用deep监听也能触发watch，性能更优。

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