Explication détaillée de l'opération de statut de modification des mutations dans Vuex-js tutoriel-php.cn

Explication détaillée de l'opération de statut de modification des mutations dans Vuex

coldplay.xixi

Libérer： 2020-07-29 17:25:52

avant

2343 Les gens l'ont consulté

Explication détaillée de l'opération de statut de modification des mutations dans Vuex

L'article précédent portait sur la lecture de l'état, et cet article concerne la modification de l'état. Autrement dit, comment opérer les mutations.

1. $store.commit()

Vuex fournit la méthode de validation pour modifier le statut

fichier 1.store.js

const mutations={
  add(state){
    state.count++
  },
  reduce(state){
    state.count--
  }
}

Copier après la connexion

2. Méthode de modification sur le bouton

Valeur de passage

<🎜 > L'opération la plus simple pour modifier l'état. Dans les projets réels, nous devons souvent transmettre des valeurs lors de la modification de l'état. Par exemple, dans l'exemple ci-dessus, nous n'ajoutons que 1 à chaque fois, mais nous devons maintenant ajouter les valeurs transmises. En fait, il suffit d'ajouter un autre paramètre à Mutations et de le transmettre lors de la validation. Regardons le code spécifique :

1.store.js

const mutations={
  add(state,n){
    state.count+=n
  },
  reduce(state){
    state.count--
  }
}

Copier après la connexion

2 Modifiez les paramètres passés par la méthode commit() du bouton. Nous passons 10, ce qui signifie en ajouter 10 chacun. heure.

3. Méthode d'acquisition de modèles de mutations

Nous ne le faisons pas. Je n'aime pas non plus le voir dans le développement réel. Lorsqu'une méthode comme $store.commit() apparaît, nous espérons l'appeler de la même manière que l'appel de la méthode dans le modèle.

Par exemple : @click="reduce" revient à ne pas référencer le plug-in vuex.

1. Utilisez import pour introduire nos mapMutations dans le modèle count.vue :