L'observation de l'objet d'état dans Pinia ne se déclenche pas lorsque l'objet change

Question

J'ai un objet profond dans mon état pinia où je souhaite placer un observateur.

export const useProductStore = definitionStore("product", {
  état : () =>
    les attributs: {},
  }),
});
≪/pré>
Lorsqu'un objet contient des données, il ressemble à ceci : 
attributs : {
  Anglais: {
    0 : {
      clé : "clé1",
      valeur : "valeur1"
    },
    1: {
      clé : "clé2",
      valeur : "valeur2"
    },
    ...
  }
}
≪/pré>
J'essaie de placer un observateur sur cet objet, mais lorsque la valeur change, l'observateur ne se déclenche pas. C'est le composant dans lequel j'essaie de le faire : 

  importer { useProductStore } depuis "@/stores/ProductStore" ;
  importer { storeToRefs } depuis "pinia" ;

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

  watch(() => ({...attributs}), (newValue, oldValue) => {
    console.log(ancienneValeur);
    console.log(nouvelleValeur);
  }, { profond : vrai });

≪/pré>
Cela vient directement de la documentation de Pinia, mais lorsque je change d'état, rien ne se passe. En utilisant les outils de développement de vue, je peux voir que l'objet d'état change, donc je sais qu'il est réactif. Qu'est-ce que j'ai raté? 

Answer 1

storeToRefs génère ref()s.

Vous dites que cet exemple vient "directement de la documentation pinia", mais je doute que vous ayez trouvé ref 。如果您这样做了，那么这是一个错误，应该通过在 piniaref répandu n'importe où dans la documentation pinia. Si vous faites cela, alors il s'agit d'un bug et doit être signalé à posva en soulevant un problème sur le référentiel de

pinia.

Vous pouvez le regarder directement pour référence :

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

.value...ou vous pouvez utiliser la fonction flèche pour voir sa .valeur1

 :

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

newVal 和 oldValNotez que les paramètres newVal et oldVal sont proxy 2. Pour accéder à sa cible, utilisez

toRaw

. Démonstration de travail

---

.

p> 1

- Il permet des observateurs plus restreints tels que :

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

2ref() “该对象是与 reactive() - Si vous mettez un objet dans ref() " l'objet est profondément réactif avec reactive()" (voir

détails🎜). Lisez également 🎜Proxy réactif vs proxy brut🎜 .🎜