Ausführliche Erläuterung der Mutations-Änderungsstatusoperation in Vuex

Im vorherigen Artikel ging es um das Lesen des Status, und in diesem Artikel geht es um das Ändern des Status. Das heißt, wie man Mutationen betreibt.

1. $store.commit( )

Vuex stellt die Commit-Methode zum Ändern des Status bereit

1.store.js-Datei

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

2. Änderungsmethode auf der Schaltfläche

c67d3721361f0a8a6e7a166899629ab1+65281c5ac262bf6d81768915a4a77ac0

077cb48f3558240155e427fd364a6d6d-65281c5ac262bf6d81768915a4a77ac0

2. Wert übergeben

Der einfachste Vorgang zum Ändern des Status. In tatsächlichen Projekten müssen wir beim Ändern des Status häufig Werte übergeben. Im obigen Beispiel addieren wir beispielsweise jedes Mal nur 1, aber jetzt müssen wir die übergebenen Werte addieren. Tatsächlich müssen wir Mutations nur einen weiteren Parameter hinzufügen und ihn beim Festschreiben übergeben. Schauen wir uns den spezifischen Code an:

1.store.js

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

2. Ändern Sie die von der commit()-Methode der Schaltfläche übergebenen Parameter. Wir übergeben 10, was bedeutet, dass jeweils 10 hinzugefügt werden Zeit.

384d8440f9a82d30fe2cd222bd88d276+65281c5ac262bf6d81768915a4a77ac0

834ca54aa351cc1aa45118bb7e0d37df-65281c5ac262bf6d81768915a4a77ac0

3. Template-Erfassungsmethode von Mutationen

Wir tun es nicht Wir möchten es auch nicht in der tatsächlichen Entwicklung sehen. Wenn eine Methode wie $store.commit() erscheint, hoffen wir, sie genauso aufzurufen wie die Methode in der Vorlage.

Zum Beispiel: @click="reduce" ist dasselbe, als würde man nicht auf das Vuex-Plug-in verweisen.

1. Verwenden Sie import, um unsere mapMutations in die Vorlage count.vue einzuführen:

import { mapState,mapMutations } from 'vuex'

2 .Fügen Sie das Methodenattribut im 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag hinzu und fügen Sie „mapMutations“ hinzu

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

3 Verwenden Sie unsere Reduzierungs- oder Add-Methode direkt in der Vorlage

5905a09bb16002d421dcfe0a182bff33-65281c5ac262bf6d81768915a4a77ac0

Hinweis: Kapseln Sie $store.commit

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

Ergänzendes Wissen: Vuex-Mutationsparameterübergabe

Der nächste Schritt besteht darin, die Parameterübergabe von Mutationen zu erklären

Schülerbeispiele hinzufügen

Der erste Typ zum Übergeben der Parametermethode

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

Empfangen Sie diesen Parameter in 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: {
  }
})

Die zweite Methode zum Übergeben der Parameterkomponente

an vuex Parameter

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

vuex empfängt Komponenten, die Parameter übergeben

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

Es ist zu beachten, dass der zweite von addstudent empfangene Parameter ein vollständiges Objekt ist, sodass die Verwendung von Parametern etwas anders ist

Verwandte Lernempfehlungen: Javascript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Mutations-Änderungsstatusoperation in Vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!