Detaillierte Erläuterung der Vuex-Nutzungsschritte

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von Vuex ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Vuex? Hier sind praktische Fälle.

vuex ist eine zentralisierte Zustandsverwaltungsarchitektur, die speziell für vue.js entwickelt wurde. Zustand? Ich verstehe es als den Teil des -Attributs in Daten, der mit anderen Vue-Komponenten geteilt werden muss, was als Zustand bezeichnet wird. Einfach ausgedrückt sind es die Attribute, die in den Daten gemeinsam genutzt werden müssen.

1. Führen Sie in der Vue-Komponente

die Methode „enabledcheckbox“ aus. „true“ ist der Parameter, der zum Ändern des Werts im Status

verwendet wird

  this.$store.dispatch("enabledcheckbox",true)

Erhalten Sie den Wert von useredit aus dem Status

this.$store.state.useredit

2 Addieren Sie den Wert des von vuex exportierten Objekts zum Status

Mutationen hinzufügen, um den Wert des Zustands zu ändern

Aktionens zu Mutationen hinzufügen

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
export default new vuex.Store({
    state: {
      useredit: false,
    },
    mutations: {
      ENABLEDCHECKBOX(state, value) {
        state.checkboxDisable = value
      },
    },
    actions: {
      enabledcheckbox({ commit }, value) {
        commit('ENABLEDCHECKBOX', value)
      },
    }
  })
  //console.log(vuex)

in main.js

import store from './vuex'
new Vue({
 el: '#app',
 router,
 store,
 render:h=>h(App)
})

Ich glaube dir Ich habe es gemeistert, nachdem ich den Fall in diesem Artikel gelesen habe. Weitere spannende Methoden finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

vue+axios zur Implementierung der Dateninteraktion

Detaillierte Erläuterung der praktischen Fähigkeiten von Angular Component

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vuex-Nutzungsschritte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!