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--
  }
}

2. Méthode de modification sur le bouton

c67d3721361f0a8a6e7a166899629ab1+65281c5ac262bf6d81768915a4a77ac0

077cb48f3558240155e427fd364a6d6d-65281c5ac262bf6d81768915a4a77ac0

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--
  }
}

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.

384d8440f9a82d30fe2cd222bd88d276+65281c5ac262bf6d81768915a4a77ac0

834ca54aa351cc1aa45118bb7e0d37df-65281c5ac262bf6d81768915a4a77ac0

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 :

import { mapState,mapMutations } from 'vuex'

2 .Ajoutez l'attribut méthodes dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a du modèle, et ajoutez mapMutations

 methods:mapMutations([
    'add','reduce'
]),

3 Utilisez notre méthode de réduction ou d'ajout directement dans le modèle

2bca00a638eab8bc4dc12e763b4cf2fb-65281c5ac262bf6d81768915a4a77ac0

Remarque : Encapsuler $store.commit

  reduce: function () {
   this.$store.commit('add', 10) // html标签是可以不写this
  }

Connaissances supplémentaires : Passage des paramètres des mutations Vuex

L'étape suivante consiste à expliquer le passage des paramètres des mutations

Ajouter des exemples d'étudiants

Le premier type de passage Méthode de paramètre

<template>
 <p>
 <h3>-------------------这是mutations传参测试-------------------</h3>
 <p>
  {{this.$store.state.students}}//将已经有的学生渲染在这儿
  <p>
  <button @click="addstu">点击添加</button>//绑定添加事件
  </p>
 </p>
 </p>
</template>

<script>
export default {
 methods: {
  addstu () {
   const newstu = {
   id: 5,
   name: &#39;张国荣&#39;,
   age: 44
   }//定死一个要添加的学生，这就是要传给mutations的参数
   this.$store.commit(&#39;addStudent&#39;, newstu)
   //调用commit方法，更新state的数据，
   //第一个参数是mutations里面的方法名，
   //第二个参数是传给mutaitons里面addstudent方法的一个参数，
   //也就是要新加入的学生
  }
 }
}
</script>

Recevoir ce paramètre dans vuex.store

const store = new Vuex.Store({
// 定义的公共变量
  state: {
   count: 1,
   students: [
    {
     id: 1,
     name: 'dx',
     age: 18
    },
    {
     id: 2,
     name: 'yx',
     age: 18
    },
    {
     id: 3,
     name: 'ym',
     age: 32
    },
    {
     id: 4,
     name: '刘亦菲',
     age: 30
    }
   ]
  },
 // state中的变量只能在mutations中通过方法修改
  mutations: {
   changeCount: function (state) {
   state.count++
   console.log('改变了count')
   },
   addStudent (state, stu) {
   state.students.push(stu)
   }//通过这种方式，接收来自组件传过来的新加入的学生
  },
  actions: {
  },
  getters: {
  }
})

La deuxième méthode de transmission du paramètre

composant à vuex Passing paramètres

addstu () {
   const newstu = {
   id: 5,
   name: '张国荣',
   age: 44
   }
   this.$store.commit({
   type: 'addStudent',
   newstu: newstu
   })//原先是传入两个参数，现在直接传入一个对象
   //type就是需要调用的mutations里面的方法
   //newstu就是要求接收的对象，也就是新加入的学生
  }

vuex recevant le composant passant les paramètres

mutations: {
   addStudent (state, playload) {
   state.students.push(playload.newstu)
   }
  },

Il est à noter que le deuxième paramètre reçu par addtudent est un objet complet, donc l'utilisation des paramètres est légèrement différente

Recommandations d'apprentissage associées :

Tutoriel vidéo javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!