Ausführliche Erläuterung der Mutations-Änderungsstatusoperation in Vuex-js-Tutorial-php.cn

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

Nach dem Login kopieren

2. Änderungsmethode auf der Schaltfläche

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

Nach dem Login kopieren

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.

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: