Inhaltsverzeichnis
3. Erstellen Sie ein Lagerhaus
So erhalten Sie { {newCount}} in der Komponente :
So erhalten Sie { {count}} in der Komponente :
moduleA.js / moduleB.js-Dateien
Fünf, das einfachste Projektbeispiel von Vuex
3. Dateiverzeichnisstruktur speichern
6. Wird im Vue3-Setup verwendet
1. Erklärung von vuex
Vuex ist ein speziell für Vue entwickelter Zustandsverwaltungsmodus für Anwendungen , der den Zustand aller Komponenten der Anwendung zentral speichert und durch entsprechende Regeln dafür sorgt, dass sich der Zustand auf vorhersehbare Weise ändert.
Kurz gesagt, Vuex verwendet ein Formular , das einem globalen Objekt ähnelt , um die gemeinsamen Daten aller Komponenten zu verwalten. Wenn Sie die Daten dieses globalen Objekts ändern möchten, müssen Sie es gemäß der von Vuex bereitgestellten Methode ändern ( Sie können es nicht in ändern dein eigener Weg ).
2. Vorteile von vuex
Die Vuex-Zustandsverwaltung unterscheidet sich von der Verwendung herkömmlicher globaler Variablen:
- Die Zustandsspeicherung von Vuex reagiert: Wenn Ihre Komponente den Vuex-Zustand verwendet, aktualisieren alle zugehörigen Komponenten automatisch die entsprechenden Daten, sobald sich dieser ändert, was Entwicklern viel Ärger erspart.
- Der Status von Vuex kann nicht direkt geändert werden: Wenn es sich um eine globale Objektvariable handelt, kann sie einfach geändert werden, dies ist jedoch in Vuex nicht möglich. Wenn Sie sie ändern möchten, müssen Sie die einzige von Vuex bereitgestellte Möglichkeit verwenden: explizit übermitteln (commint) Mutationen, um eine Modifikation zu erreichen. Dies hat den Vorteil, dass wir bequem jede Zustandsänderung nachverfolgen können, was beim Debuggen während des Entwicklungsprozesses sehr praktisch ist.
3. Verwenden Sie Schritte
1. Installieren Sie Vuex
npm install vuex --save
2. Referenz-Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3. Erstellen Sie ein Lagerhaus
Um Vuex zu verwenden, müssen wir eine Instanz erstellen store, die wir Warehouse nennen, und dieses Warehouse verwenden, store um unseren Zustand zu verwalten.
//创建一个 store
const store = new Vuex.Store({});
4. Enthält Module
- Status: definiert die Datenstruktur des Anwendungsstatus, in dem der standardmäßige Anfangsstatus festgelegt werden kann.
- Getter: Ermöglicht Komponenten das Abrufen von Daten aus dem Speicher. Die Hilfsfunktion mapGetters ordnet die Getter im Speicher lediglich lokalen berechneten Eigenschaften zu.
- Mutation: ist die einzige Möglichkeit, den Zustand im Speicher zu ändern, und muss eine synchrone Funktion sein.
- Aktion: Es wird verwendet, um eine Mutation zu übermitteln, anstatt den Status direkt zu ändern, und kann jede asynchrone Operation enthalten.
- Modul: Der Shop kann in Module unterteilt werden. Jedes Modul hat seinen eigenen Zustand, Mutation, Aktion, Getter und sogar verschachtelte Submodule
Die Funktion von Vuex ähnelt dem globalen Objekt. Vuex verwendet einen einzelnen Zustandsbaum und verwendet einen Objektzustand, um alle Zustände der gesamten Anwendungsebene zu enthalten. Sie können verstehen, dass diese Zustände eine Menge globaler Variablen und Daten sind.
1. Zustand
Angenommen, wir haben einen globalen Zustand count mit einem Wert von 5. Dann können wir es als die Summe state im Objekt definieren , als einen globalen Zustand, den wir verwenden können. folgendermaßen:keyvalue
//创建一个 store
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数：5
}
});
2. Getter
Es kann davon ausgegangen werden, dass Getter die berechneten Eigenschaften des Speichers sind, ähnlich wie berechnet, die eine gewisse Filterung, Transformation usw. an den Daten im Zustand durchführen
Angenommen, wir möchten einen neuen Zustand newCount basierend auf state.count ableiten, dann ist es geeignet, unsere Getter zu verwenden
Getter akzeptieren den Zustand als ihren ersten Parameter
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数：5
},
getters:{
newCount:state => state.count * 3
}
});
So erhalten Sie es in der Komponente {
{newCount}} :
export default {
computed: {
newCount(){
return this.$store.getters.newCount;
}
}
};
3. Mutationen
Die einzige Möglichkeit, wie Vuex uns das Ändern des Zustands im Lagerhaus ermöglicht, besteht darin, eine Mutation zu übermitteln, die eine synchrone Funktion sein muss
Wir haben eine Funktion namens increment in mutations definiert, und im Hauptteil der Funktion wollen wir Änderungen vornehmen
Akzeptiert den Status als ersten Parameter, und der zweite ist die benutzerdefinierte Parameterübergabe
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数：5
},
// mutations是修改state中数据的唯一途径
mutations:{
increment(state，value){
state.count += value;
}
}
});
Wenn wir senden commit , ist der erste Parameter "increment"die Methode, die zu entspricht mutations , incrementund der zweite Parameter ist der benutzerdefinierte Wert. Zum Beispiel:
methods: {
getVal(event) {
//获取当前的按键的值
let value = event.target.dataset.value;
//通过commit提交一个名为increment的mutation
this.$store.commit("increment", value);
}
}
So erhalten Sie es in der Komponente {
{count}} :
export default {
computed: {
count(){
return this.$store.state.count;
}
}
};
4. Aktion
- Wird für die Übermittlung verwendet
mutation, ohne den Status direkt zu ändern, kann beliebige asynchrone Vorgänge enthalten - Nur durch
action=>mutations=>statesdiesen Prozess sind die spezifischen Schritte wie folgt:export default new Vuex.Store({ //存放数据 state: { obj: {}, }, //4. 通过commit mutations中的方法来处理 mutations: { getParam(state, Object) { //5.修改state中的数据 state.obj = Object } }, //2.接受dispatch传递过来的方法和参数 actions: { getParamSync(store, Object) { // 处理异步操作 setTimeout(() => { //3.通过commit提交一个名为getParam的mutation //action 函数接收一个 store 的实例对象，因此你可以调用 store.commit 提交一个 mutation store.commit('getParam', Object); }, 1000) } } })Dann können wir es in der Komponente so nennen
methods: { getVal() { let name= 'xia'; let age= '26'; let sex= 'man'; //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions this.$store.dispatch('getParamSync',{name,age,sex}) } }5. Module
Mit zunehmender Komplexität des Projekts wird es zur Vereinfachung der Verwaltung von Vuex im Allgemeinen in verschiedene Module (
Module) nach Funktionen für die zukünftige Verwaltung unterteilt. Jedes Modul hat seine eigenenstate,mutation, und sogar verschachtelte Untermoduleactiongetterimport Vue from 'vue' import Vuex from 'vuex' import state from './state' import mutations from './mutations' import actions from './actions' import * as getters from './getters' import moduleA from './module/moduleA' // 模块A import moduleB from './module/moduleB' // 模块B Vue.use(Vuex) export default new Vuex.Store({ actions, getters, state, mutations, modules: { moduleA, moduleB } })moduleA.js/moduleB.jsDokumente// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块 export default { state: { text: 'moduleA' }, getters: {}, mutations: {}, actions: {} }Dann können wir es in der Komponente so nennen
<template> <div class="demo"> <h1>{ {getText1}}</h1> <h1>{ {getText2}}</h1> </div> </template>computed: { getText1(){ return this.$store.state.moduleA.text; }, //或 ...mapState({ getText2: state => state.moduleB.text; }) }Daraus ist ersichtlich, dass der Zustand innerhalb des Moduls lokal ist und nur zum Modul selbst gehört, sodass nach außen über den entsprechenden Modulnamen zugegriffen werden muss.
-
Fünf, das einfachste Projektbeispiel von Vuex
Mit der Vuex-Syntax Zucker
mapMutationsundmapGetters1. Daten speichern
a.vue-Dokument
import { mapMutations } from "vuex"; // 引入mapMutations export default { methods: { ...mapMutations({ // 将changeNews与mutations中的SET_NEWS关联 changeNews: "SET_NEWS" }), submit(){ // 提交一个名为changeNews的mutation，并传入参数val let val = 'test news'; this.changeNews(val);// 相当于this.$store.commit("changeNews", val); } } }2. Daten abrufen
b.vue-Dokument
import { mapGetters } from "vuex"; // 引入mapGetters export default { computed: { // 用vuex读取数据(读取的是getters.js中的数据) // 相当于this.$store.getters.news(vuex语法糖) ...mapGetters(["news"]) }, created() { // 获取getters中news数据 console.log(this.news); } }3. Dateiverzeichnisstruktur speichern
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'
//每次修改state都会在控制台打印log
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict: debug, // 当debug=true时开启严格模式(性能有损耗)
plugins: debug ? [createLogger()] : []
})
state.js
const state = {
news: {}
}
export default state;
mutationen.js
const mutations = {
SET_NEWS(state, val) {
state.news= val
}
}
export default mutations;
Aktionen.js
//异步处理
const actions = {
M_NEWS({ commit }, val) {
commit('SET_NEWS', val); // commit mutations修改
}
}
export default actions;
getters.js
// 通常通过getters取数据 (this.$store.getters.news;)
export const news = state => state.news // 不做其他处理 直接映射出去
4. Laden verwenden
main.js zitiert in
import store from './store' //vuex存储文件
new Vue({
el: '#app',
router,
store,
components: {
App
},
template: '<App/>'
})
6. Wird im Vue3-Setup verwendet
Im Vue2-Projekt können Sie verwenden, this.$store um die Daten in vuex abzurufen und die globalen Daten zu speichern, aber in der Setup-Funktion von Vue3 gibt es kein this solches Konzept, Sie können es useStore stattdessen verwenden, die spezifische Verwendung ist wie folgt
//引入路由函数
import { useStore } from "vuex";
//使用
setup() {
//使用vuex
const store = useStore();
//正常使用，相当于store代替了this.$store
store.state ...
return {};
}