监听Pinia状态变化时newVal与oldVal始终相同的问题排查

核心问题 #

你遇到的问题本质是引用类型的浅比较导致新旧值指向同一内存地址：

• searchFilters 是通过 storeToRefs 生成的 ref 对象，直接监听 searchFilters.value.categories 相当于监听了数组的引用。
• 当在 Pinia store 中修改 categories 时，如果是直接对原数组做修改（比如 push、splice，或重新赋值为同一引用的数组），watch 开启 deep: true 会触发回调，但此时 newVal 和 oldVal 指向同一个数组对象，二者完全相等。
• 首次触发时 oldVal 为空是因为初始值和第一次修改的数组是不同引用，后续修改若复用同一引用，就会出现新旧值一致的情况。

另外你的判断逻辑存在错误：newVal.every((value, index) => value !== oldVal[index]) 是判断所有元素都不相等，但你实际需要的应该是存在元素不相等，需改成 !newVal.every((value, index) => value === oldVal[index])。

修复方案 #

方案1：正确监听 ref 对象的属性（推荐） #

不要直接监听 searchFilters.value.categories，而是监听 searchFilters 这个 ref，或通过 getter 函数指定监听目标：

const { searchFilters } = storeToRefs(searchFiltersStore)

// 方式1：监听整个searchFilters ref，在回调中获取categories
watch(searchFilters, (newFilters, oldFilters) => {
  const newVal = newFilters.categories
  const oldVal = oldFilters.categories
  if (
    newVal.length !== oldVal.length ||
    !newVal.every((value, index) => value === oldVal[index])
  ) {
    reset(undefined, true)
  }
}, { deep: true })

// 方式2：用getter函数监听categories，确保每次获取最新引用
watch(
  () => searchFilters.value.categories,
  (newVal, oldVal) => {
    if (
      newVal.length !== oldVal.length ||
      !newVal.every((value, index) => value === oldVal[index])
    ) {
      reset(undefined, true)
    }
  },
  { deep: true }
)

方案2：在Pinia Store中修改数组时返回新引用 #

每次修改 categories 都生成新的数组实例，而非修改原数组：

// 在searchFiltersStore的actions中
actions: {
  updateCategories(newCategories) {
    // 错误写法：直接修改原数组（如this.searchFilters.categories.push(xxx)）
    // 正确写法：返回新数组
    this.searchFilters.categories = [...newCategories]
    // 或根据需求用filter、map等返回新数组
  }
}

这种方式下，watch 中的 newVal 和 oldVal 会是不同引用，能正确区分新旧值。

方案3：手动深拷贝旧值（不推荐，性能较差） #

若无法修改Store的修改逻辑，可在回调中手动深拷贝旧值：

watch(
  () => searchFilters.value.categories,
  (newVal, oldVal) => {
    const copiedOldVal = JSON.parse(JSON.stringify(oldVal))
    if (
      newVal.length !== copiedOldVal.length ||
      !newVal.every((value, index) => value === copiedOldVal[index])
    ) {
      reset(undefined, true)
    }
  },
  { deep: true }
)

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