当对象更改时，观察 pinia 中的状态对象不会触发

Question

我的 pinia 状态中有一个深层物体，我想在其中放置一个观察者。

export const useProductStore = defineStore("product", {
  state: () => ({
    attributes: {},
  }),
});

当对象内部有数据时，它看起来像这样：

attributes: {
  english: {
    0: {
      key: "key1",
      value: "value1"
    },
    1: {
      key: "key2",
      value: "value2"
    },
    ...
  }
}

我试图在这个对象上放置一个观察器，但是当值发生变化时，观察器不会触发。这是我尝试在其中执行此操作的组件：

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

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

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

这直接来自 pinia 文档，但是当我更改状态时，什么也没有发生。使用 vue 开发工具，我可以看到状态对象正在更改，所以我知道它是反应性的。我错过了什么？

Answer 1

storeToRefs 生成 ref()s.

您说这个示例“直接来自 pinia 文档”，但我怀疑您是否发现在 pinia 文档中的任何地方传播 ref 。如果您这样做了，那么这是一个错误，应该通过在 pinia 的存储库上提出问题来向 posva 指出。

可以直接观看参考：

watch(
  attributes,
  handler, 
  { deep: true }
)

...或者您可以使用箭头函数查看其.value¹：

watch(
  () => attributes.value,
  handler,
  { deep: true }
)

注意 newVal 和 oldVal 参数是 代理 ²。要访问其目标，请使用 toRaw。

工作演示。 p>

---

¹ - 它允许更窄的观察者，例如：

watch(
  () => attributes.value[0]?.value),
  handler
)

² - 如果将对象放入 ref() “该对象是与 reactive()" 进行深度反应（参见 详细信息）。另请阅读反应式代理与原始代理 .