當物件變更時，觀察 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( )" 進行深度反應（請參閱詳細資訊）。另請閱讀反應式代理與原始代理 .