J'utilise vuex
et vuejs 2
ensemble.
Je suis nouveau vuex
, je veux voir un store
changement variable.
Je veux ajouter la watch
fonction dans monvue component
Voici ce que j'ai jusqu'à présent:
import Vue from 'vue';
import {
MY_STATE,
} from './../../mutation-types';
export default {
[MY_STATE](state, token) {
state.my_state = token;
},
};
Je veux savoir s'il y a des changements dans le my_state
Comment regarder store.my_state
dans mon composant vuejs?
javascript
vue.js
vuejs2
vuex
raffffffff
la source
la source
Réponses:
Disons, par exemple, que vous avez un panier de fruits, et chaque fois que vous ajoutez ou supprimez un fruit du panier, vous voulez (1) afficher des informations sur le nombre de fruits, mais vous voulez également (2) être informé de le compte des fruits d'une manière fantaisiste ...
fruit-count-component.vue
Veuillez noter que le nom de la fonction dans l'
watch
objet doit correspondre au nom de la fonction dans l'computed
objet. Dans l'exemple ci-dessus, le nom estcount
.Les nouvelles et anciennes valeurs d'une propriété surveillée seront transmises au rappel de surveillance (la fonction de comptage) en tant que paramètres.
Le magasin de paniers pourrait ressembler à ceci:
corbeille de fruits.js
Vous pouvez en savoir plus dans les ressources suivantes:
la source
watch
action doit se diviser en deux étapes: 1) Tout d'abord, vérifier si les données souhaitées sont mises en cache et si elles ne font que renvoyer les données mises en cache; 2) Si le cache échoue, j'ai besoin d'une action asynchrone ajax pour récupérer les données, mais cela semble être leaction
travail du. En espérant que ma question a du sens, merci!Vous ne devez pas utiliser les observateurs de composant pour écouter le changement d'état. Je vous recommande d'utiliser les fonctions getters, puis de les mapper à l'intérieur de votre composant.
Dans votre magasin:
Vous devriez pouvoir écouter les modifications apportées à votre boutique en utilisant
this.myState
dans votre composant.https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper
la source
C'est aussi simple que:
la source
function(n) { console.log(n); }
Comme mentionné ci-dessus, il n'est pas judicieux de regarder les changements directement en magasin
Mais dans de très rares cas, cela peut être utile pour quelqu'un, je vais donc laisser cette réponse. Pour d'autres cas, veuillez consulter la réponse @ gabriel-robert
Vous pouvez le faire à travers
state.$watch
. Ajoutez ceci dans votrecreated
méthode (ou là où vous en avez besoin) dans le composantPlus de détails: https://vuex.vuejs.org/api/#watch
la source
Je pense que le demandeur veut utiliser la montre avec Vuex.
la source
C'est pour toutes les personnes qui ne peuvent pas résoudre leur problème avec les getters et qui ont réellement besoin d'un observateur, par exemple pour parler à des tiers non-vue (voir Vue Watchers sur quand utiliser les observateurs).
Les observateurs et les valeurs calculées du composant Vue fonctionnent également sur les valeurs calculées. Ce n'est donc pas différent avec vuex:
s'il ne s'agit que de combiner l'état local et global, la documentation de mapState fournit également un exemple:
la source
si vous utilisez dactylographié, vous pouvez:
la source
Créez un état local de votre variable de magasin en surveillant et en définissant les changements de valeur. De telle sorte que la variable locale change pour le v-model d'entrée de formulaire ne mute pas directement la variable de stockage .
la source
La meilleure façon d'observer les changements de magasin est d'utiliser
mapGetters
comme l'a dit Gabriel. Mais il y a un cas où vous ne pouvez pas le faire, parmapGetters
exemple, vous voulez obtenir quelque chose du magasin en utilisant le paramètre:dans ce cas, vous ne pouvez pas utiliser
mapGetters
. Vous pouvez essayer de faire quelque chose comme ceci à la place:Mais malheureusement,
todoById
ne sera mis à jour que sithis.id
est modifiéSi vous souhaitez mettre à jour vos composants dans ce cas, utilisez la
this.$store.watch
solution fournie par Gong . Ou gérez votre composant consciemment et mettezthis.id
à jour lorsque vous avez besoin de mettre à jourtodoById
.la source
Si vous souhaitez simplement observer une propriété d'état et agir ensuite dans le composant en fonction des modifications de cette propriété, consultez l'exemple ci-dessous.
Dans
store.js
:Dans ce scénario, je crée une
boolean
propriété d'état que je vais changer à différents endroits de l'application comme ceci:Maintenant, si je dois surveiller cette propriété d'état dans un autre composant, puis modifier la propriété locale, j'écrirais ce qui suit dans le
mounted
crochet:Tout d'abord, je configure un observateur sur la propriété state, puis dans la fonction de rappel, j'utilise le
value
de cette propriété pour modifier lelocalProperty
.J'espère que ça aide!
la source
Lorsque vous souhaitez regarder au niveau de l'état, cela peut être fait de cette façon:
la source
store.state
changement pardispatch
action d'état du composant car ce comportement ne fonctionne que si vous utilisez ce composant. Vous pourriez également terminer avec une boucle infinie. Regardez pourstore.state
changer rarement utiliser, par exemple si vous avez un composant ou une page qui devrait effectuer une action basée sur desstore.state
modifications qui ne pourraient pas être gérées à l'aide de mapState calculé uniquement là où vous ne pouvez pas comparernewValue
vsoldValue
store.dispatch
? si vous voulez gérer lestore.state
changement pourstore' why not handle it inside
store.mutations`?store.dispatch
premier. Par exemple, je veux obtenir toutes les villes d'un pays chaque fois que cela$store.state.country
change, alors j'ajoute ceci à l'observateur. Ensuite, j'écrirais un appel ajax: dansstore.dispatch('fetchCities')
j'écris:axios.get('cities',{params:{country: state.country }}).then(response => store.commit('receiveCities',response) )
Vous pouvez utiliser une combinaison d' actions Vuex , de getters , de propriétés calculées et d' observateurs pour écouter les changements sur une valeur d'état Vuex.
Code HTML:
Code JavaScript:
Voir la démo de JSFiddle .
la source
Vous pouvez également vous abonner aux mutations du magasin:
https://vuex.vuejs.org/api/#subscribe
la source
À l'intérieur du composant, créez une fonction calculée
Maintenant, le nom de la fonction calculée peut être regardé, comme
Les modifications apportées à l'
vuex
étatmy_state
seront reflétées dans la fonction calculéemyState
et déclenchent la fonction de surveillance.Si l'état a
my_state
des données imbriquées, l'handler
option aidera plusCela surveillera toutes les valeurs imbriquées dans le magasin
my_state
.la source
Vous pouvez également utiliser mapState dans votre composant vue pour obtenir directement l'état du magasin.
Dans votre composant:
Où
my_state
est une variable du magasin.la source
la source
J'ai utilisé de cette façon et cela fonctionne:
store.js:
mutations.js
actions.js
getters.js
Et dans votre composant où vous utilisez l'état du magasin:
Lorsque l'utilisateur soumet le formulaire, l'action STORE sera appelée, après le succès de la création, la mutation CREATE_SUCCESS est validée après cela. Tournez createSuccess est vrai, et dans le composant, l'observateur verra que la valeur a changé et déclenchera une notification.
isSuccess doit correspondre au nom que vous déclarez dans getters.js
la source