pinia で状態オブジェクトを観察しても、オブジェクトが変更されたときにトリガーされない

Question

ピニア状態にオブザーバーを配置したい深いオブジェクトがあります。

export const useProductStore =defineStore("product", {
  状態: () => ({
    属性: {}、
  })、
});

オブジェクトの内部にデータがある場合、次のようになります:

属性: {
  英語： {
    0: {
      キー: "key1"、
      値: "値1"
    }、
    1: {
      キー: "key2"、
      値: "値2"
    }、
    ...
  }
}

このオブジェクトにオブザーバーを配置しようとしていますが、値が変化してもオブザーバーは起動しません。これは、これを実行しようとしているコンポーネントです:

<スクリプトのセットアップ>
  import { useProductStore } from "@/stores/ProductStore";
  "pinia" から {storeToRefs } をインポートします。

  const productStore = useProductStore();
  const { 属性 } = storeToRefs(productStore);

  watch(() => ({...属性}), (newValue, oldValue) => {
    console.log(oldValue);
    console.log(newValue);
  }, { 深い: true });
</スクリプト>

これは pinia のドキュメントから直接引用したものですが、状態を変更しても何も起こりません。 vue dev ツールを使用すると、状態オブジェクトが変化していることがわかり、それがリアクティブであることがわかります。私は何を取りこぼしたか？

Answer 1

storeToRefs ref()s.

を生成します。

この例は「pinia ドキュメントから直接引用した」とおっしゃっていますが、ref が pinia ドキュメントのどこかに伝播されているのを見つけたとは思えません。これを行う場合、これはバグであるため、pinia のリポジトリに問題を提起して、posva に指摘する必要があります。

参照用に直接見ることができます:

リーリー

...または、アロー関数を使用して、その .value1

:

を表示することもできます。 リーリー newVal および oldVal パラメータは Agent 2 であることに注意してください。ターゲットにアクセスするには、toRaw

を使用します。

動作デモ。

---

p>

1

- より狭い範囲のオブザーバーが可能になります。例:

リーリー 2 - オブジェクトを ref() " に置くと、そのオブジェクトは に関連しますreactive( )" 深い反応を実行します (詳細を参照)。 リアクティブ プロキシと生プロキシの比較

もお読みください。