VueX中loadState的watch监听新旧值异常问题求助

这是Vue开发中监听引用类型状态时非常常见的坑，我来帮你拆解问题原因和解决办法：

为什么oldValue和newValue会一样？ #

你的loadState是一个引用类型的对象，Vue的watch在处理这类数据时：

• 即使开启了deep: true，它监听的是对象内部属性的变化，但对象本身的引用并没有改变（因为你在Vuex中可能是直接修改对象的某个属性，比如state.loadState.criteria = "LOADING"，而不是替换整个对象）。
• Vue不会自动为你深拷贝旧值，所以oldValue和newValue指向的是同一个对象内存地址，自然打印出来看起来完全一样。

解决方案 #

方案1：遵循Vuex规范，修改状态时返回新对象（推荐） #

Vuex的核心原则是状态只读，修改状态时应该通过mutation返回一个新的对象，而不是直接修改原对象的属性。这样对象的引用会更新，watch就能正确获取到新旧值：

// 在你的Vuex store的mutations中
const mutations = {
  UPDATE_LOAD_STATE(state, { key, status }) {
    // 展开原对象，替换指定key的状态，生成新对象
    state.loadState = {
      ...state.loadState,
      [key]: status
    }
  }
}

之后你修改状态时，调用这个mutation即可：

this.$store.commit('UPDATE_LOAD_STATE', { key: 'criteria', status: 'LOADING_DONE' })

这样你的watch就能正常拿到不同的oldValue和newValue了，同时也符合Vuex的最佳实践。

方案2：手动保存旧值的深拷贝（不修改Vuex时用） #

如果暂时不想改动Vuex的写法，可以在组件中手动保存loadState的深拷贝作为旧值：

export default {
  computed: {
    ...mapGetters(['loadState'])
  },
  data() {
    return {
      // 初始化时保存初始状态的深拷贝
      prevLoadState: JSON.parse(JSON.stringify(this.loadState))
    }
  },
  watch: {
    loadState: {
      deep: true,
      handler(newValue) {
        // 对比新旧值的差异
        Object.keys(newValue).forEach(key => {
          if (this.prevLoadState[key] !== newValue[key]) {
            console.log(key, '旧值:', this.prevLoadState[key], '新值:', newValue[key])
          }
        })
        // 更新旧值为当前状态的深拷贝
        this.prevLoadState = JSON.parse(JSON.stringify(newValue))
      }
    }
  }
}

⚠️ 注意：JSON.parse(JSON.stringify)只适用于纯JSON格式的数据（比如你的字符串状态），如果对象里有函数、Symbol、循环引用等，这个方法会失效，此时可以用第三方库比如lodash.cloneDeep来做深拷贝。

方案3：直接监听单个属性（精准监听） #

如果你只关心某几个特定属性的变化，不如直接监听这些子属性，这样更高效也不会有引用问题：

watch: {
  'loadState.criteria'(newVal, oldVal) {
    console.log('criteria状态变化:', oldVal, '→', newVal)
  },
  'loadState.filters'(newVal, oldVal) {
    console.log('filters状态变化:', oldVal, '→', newVal)
  }
}

总结 #

优先推荐方案1，既解决了watch的问题，也符合Vuex的状态管理规范；如果无法修改Vuex代码，可以选择方案2或3。

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