Das Beobachten des Zustandsobjekts in Pinia wird nicht ausgelöst, wenn sich das Objekt ändert

Question

Ich habe ein tiefes Objekt in meinem Pinia-Zustand, an dem ich einen Beobachter platzieren möchte.

export const useProductStore = defineStore("product", {
  Zustand: () => ({
    Attribute: {},
  }),
});

Wenn ein Objekt Daten enthält, sieht es so aus:

attributes: {
  Englisch: {
    0: {
      Schlüssel: "Schlüssel1",
      Wert: "Wert1"
    },
    1: {
      Schlüssel: "Schlüssel2",
      Wert: "Wert2"
    },
    ...
  }
}

Ich versuche, einen Beobachter auf diesem Objekt zu platzieren, aber wenn sich der Wert ändert, wird der Beobachter nicht ausgelöst. Dies ist die Komponente, in der ich dies versuche:

<script setup>
  import { useProductStore } aus "@/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>

Das kommt direkt aus der Pinia-Dokumentation, aber wenn ich den Status ändere, passiert nichts. Mit den Vue-Entwicklungstools kann ich sehen, dass sich das Statusobjekt ändert, sodass ich weiß, dass es reaktiv ist. Was habe ich verpasst?

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()" 进行深度反应（参见 详细信息）。另请阅读反应式代理与原始代理 .