Pinia中监听state对象变更时watch回调不触发的问题

问题根源 #

你的watch监听源写法有误：(() => ({...attributes}))中，attributes是通过storeToRefs得到的Ref对象，直接展开{...attributes}得到的是包含value属性的对象（而非实际的attributes数据），导致watch无法正确感知深层对象的变化。

修复方案 #

有两种正确的写法可以解决这个问题：

方案1：直接监听Ref对象（推荐） #

因为storeToRefs返回的attributes本身就是响应式Ref，直接监听它并开启deep: true即可：

<script setup>
  import { useProductStore } from "@/stores/ProductStore";
  import { storeToRefs } from "pinia";
  import { watch } from "vue";

  const productStore = useProductStore();
  const { attributes } = storeToRefs(productStore);

  // 直接监听attributes这个Ref，开启深度监听
  watch(attributes, (newValue, oldValue) => {
    console.log(oldValue);
    console.log(newValue);
  }, { deep: true });
</script>

方案2：监听展开后的对象内容 #

如果需要监听对象的内容副本（而非引用），要记得取Ref的value属性来展开：

<script setup>
  import { useProductStore } from "@/stores/ProductStore";
  import { storeToRefs } from "pinia";
  import { watch } from "vue";

  const productStore = useProductStore();
  const { attributes } = storeToRefs(productStore);

  watch(() => ({...attributes.value}), (newValue, oldValue) => {
    console.log(oldValue);
    console.log(newValue);
  }, { deep: true });
</script>

额外说明 #

确保修改Pinia的attributes时遵循Vue响应式规则：

• 新增属性时，避免直接赋值（如attributes.english = {}），可使用解构赋值（productStore.attributes = {...productStore.attributes, english: {}}）或Vue.set
• 修改深层属性时，直接赋值即可（如productStore.attributes.english[0].value = "newValue"），Pinia会自动维护响应式

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