Detaillierte Erläuterung des Vuex-Gesamtfalls

npm installiere vuex --save

Vue von „vue“ importieren
Vuex von „vuex“ importieren
Vue.Verwenden(Vuex)

//Einen Shop erstellen
const store = neuer Vuex.Store({});

 //Einen Shop erstellen
 const store = neuer Vuex.Store({
    //state speichert den Status der Anwendungsschicht state:{
        Anzahl: 5 // Gesamt: 5
    }
 });

const store = neuer Vuex.Store({
   //state speichert den Status der Anwendungsschicht state:{
      Anzahl: 5 // Gesamt: 5
   },
   Getter: {
      neuerAnzahl:Zustand => Zustand.Anzahl * 3
   }
});

Standard exportieren {
  berechnet: {
      neueAnzahl(){
          gib dies zurück.$store.getters.newCount;
      }
  }
};  

 const store = neuer Vuex.Store({
    //state speichert den Status der Anwendungsschicht state:{
        Anzahl: 5 // Gesamt: 5
    },
    // Mutationen sind die einzige Möglichkeit, Daten im Status Mutationen zu ändern:{
        Inkrement(Zustand, Wert) {
            Zustand.Anzahl += Wert;
        }
    }
 });

 Methoden: {
   getVal(Ereignis) {
     //Den aktuellen Schlüsselwert abrufen let value = event.target.dataset.value;
     //Senden Sie eine Mutation mit dem Namen increment per Commit
     this.$store.commit("Inkrement", Wert);
   }
 }

Standard exportieren {
  berechnet: {
      zählen(){
          gib dies zurück.$store.state.count;
      }
  }
};  

exportiere standardmäßig neuen Vuex.Store({
    //Datenstatus speichern: {
        Objekt: {},
    },
    //4. Behandeln Sie Mutationen mit den Methoden in Commit-Mutationen: {
        getParam(Zustand, Objekt) {
            //5. Ändern Sie die Daten im Status state.obj = Object
        }
    },
    //2. Akzeptieren Sie die von den Dispatch-Aktionen übergebenen Methoden und Parameter: {
        getParamSync(store, Objekt) {
            // Asynchrone Operationen verarbeiten setTimeout(() => {
                //3. Senden Sie eine Mutation namens getParam über Commit
                //Die Aktionsfunktion empfängt ein Store-Instanzobjekt, sodass Sie store.commit aufrufen können, um eine Mutation festzuschreiben
                store.commit('getParam', Objekt);
            }, 1000)
        }
    }
})

Methoden: {
   getVal() {
	  lass name='xia';
	  sei Alter = '26';
	  sei Geschlecht = 'Mann';
	  //1. Übergeben Sie die Methode getParamSync und mehrere Parameter {name, age, sex} über dispatch an Aktionen
	  dies.$store.dispatch('getParamSync',{Name,Alter,Geschlecht})
   }
}

Vue von „vue“ importieren
Vuex von „vuex“ importieren
Status aus „./state“ importieren
Mutationen aus „./mutations“ importieren
Aktionen aus „./actions“ importieren
importiere * als Getter aus './getters'

importiere ModulA aus './Modul/ModulA' // Modul A
importiere ModulB aus './Modul/ModulB' // Modul B

Vue.Verwenden(Vuex)

exportiere standardmäßig neuen Vuex.Store({
    Aktionen,
    Getter,
    Zustand,
    Mutationen,
    Module:
        ModulA,
        ModulB
    }
})

// Jedes Modul hat seinen eigenen Status, seine eigene Mutation, Aktion, Getter und sogar verschachtelte Untermodule export default {
    Zustand: {
        Text: 'ModulA'
    },
    Getter: {},
    Mutationen: {},
    Aktionen: {}
}

<Vorlage>
	<div Klasse="Demo">
		<h1>{{getText1}}</h1>
		<h1>{{getText2}}</h1>
	</div>
</Vorlage>

berechnet: {
    getText1(){
    	gib dies zurück.$store.state.moduleA.text;
    },
    // oder ...mapState({
		getText2: Status => Status.ModulB.Text;
	})
}

importiere { mapMutations } von "vuex"; // Importiere mapMutations
Standard exportieren {
	Methoden: {
		...mapMutations({
		    // Verknüpfe changeNews mit SET_NEWS in Mutationen changeNews: "SET_NEWS"
		}),
		einreichen(){
			// Senden Sie eine Mutation mit dem Namen changeNews und übergeben Sie den Parameter val
			let val = 'Testnachrichten';
			this.changeNews(val); // entspricht this.$store.commit("changeNews", val);
		}
	}
}

importiere { mapGetters } von "vuex"; // MapGetters importieren 
Standard exportieren {
	berechnet: {
        //Verwende vuex zum Lesen der Daten (die Daten in getters.js werden gelesen)
        // Entspricht this.$store.getters.news (Vuex-Syntax-Sugar)
        ...mapGetters(["Neuigkeiten"])
	},
	erstellt() {
        // Holen Sie sich die Nachrichtendaten in Gettern console.log(this.news);
	}
}

Vue von „vue“ importieren
Vuex von „vuex“ importieren
Status aus „./state“ importieren
Mutationen aus „./mutations“ importieren
Aktionen aus „./actions“ importieren
importiere * als Getter aus './getters'

//Jedes Mal, wenn der Status geändert wird, wird das Protokoll in der Konsole ausgedruckt
importiere createLogger aus „vuex/dist/logger“

Vue.Verwenden(Vuex)

const debug = process.env.NODE_ENV !== 'Produktion'

exportiere standardmäßig neuen Vuex.Store({
	Aktionen,
	Getter,
	Zustand,
	Mutationen,
	strict: debug, // Aktiviere den strikten Modus, wenn debug=true (Leistungsverlust)
	Plugins: debuggen? [createLogger()]: []
})

konstanter Zustand = {
	Nachricht: {}
}

Standardzustand exportieren;

const Mutationen = {
	SET_NEWS(Status, Wert) {
		staat.news = val
	}
}

Standardmutationen exportieren;

//Asynchrone Verarbeitung const actions = {
    M_NEWS({ Commit }, Wert) {
        commit('SET_NEWS', val); // Mutationen committen }
}

Standardaktionen exportieren;

//Normalerweise werden Daten über Getter abgerufen (this.$store.getters.news;)
export const news = state => state.news // Direkt zuordnen, ohne weitere Verarbeitung durchzuführen

Store aus './store' importieren //Vuex-Speicherdatei neue Vue({
	el: '#app',
	Router,
	speichern,
	Komponenten:
		App
	},
	Vorlage: '<App/>'
})