Analyse der Vuex-Nutzungsschritte

Dieses Mal werde ich Ihnen eine Analyse der Schritte zur Verwendung von vuex bringen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von vuex?

Was ist Vuex?

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

Fügen Sie Mutationen hinzu, um den Wert des Zustands zu ändern

Fügen Sie Aktionens zu Mutationen hinzu

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

Zusammenfassung

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vue implementiert die dynamische Aktualisierung der Echarts-Komponente

Verwenden Sie Selectpicker, um Dropdown-Box im Bootstrap zu implementieren

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