L'observation de l'objet d'état dans Pinia ne se déclenche pas lorsque l'objet change
P粉002546490
P粉002546490 2023-08-28 12:14:33
0
1
560
<p>J'ai un objet profond dans mon état pinia où je souhaite placer un observateur. </p> <pre class="brush:js;toolbar:false;">export const useProductStore = definitionStore("product", { état : () => les attributs: {}, }), }); ≪/pré> <p>Lorsqu'un objet contient des données, il ressemble à ceci : </p> <pre class="brush:json;toolbar:false;">attributs : { Anglais: { 0 : { clé : "clé1", valeur : "valeur1" }, 1: { clé : "clé2", valeur : "valeur2" }, ... } } ≪/pré> <p>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 : </p> <pre class="brush:js;toolbar:false;"><configuration du script> 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 }); </script> ≪/pré> <p>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é? </p>
P粉002546490
P粉002546490

répondre à tous(1)
P粉668113768

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 }
)
newValoldValNotez 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🎜 .🎜
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal