Detaillierte Interpretation des Verwaltungsmodus Vuex in Vue

Dieser Artikel führt hauptsächlich in ein tiefgreifendes Verständnis des Vue-Zustandsverwaltungsmodells vuex ein. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen

vuex ist ein Zustandsverwaltungsmodus, der speziell für vue.js entwickelt wurde und auch mit Devtools debuggt werden kann.

Hinweis: Die Beispiele und anderen Codes in diesem Artikel verwenden die es6-Syntax.

Link

1. offizielle chinesische Vuex-Website

2. Ein einfaches Einkaufszentrum, das mit Vue und Vuex implementiert wurde, dient nur als Referenz

Was ist Vuex?

Erstes Zitat von der offiziellen Vuex-Website:

Vuex ist ein Zustandsverwaltungsmodell, das speziell für Vue.js-Anwendungen entwickelt wurde. Es verwendet einen zentralen Speicher, um den Status aller Komponenten der Anwendung zu verwalten, und stellt mithilfe entsprechender Regeln sicher, dass sich der Status auf vorhersehbare Weise ändert.

Der Zustandsverwaltungsmodus und die zentrale Speicherverwaltung klingen auf den ersten Blick sehr hochwertig und beängstigend. Meiner Meinung nach speichert Vuex alle Variablen, die gemeinsam genutzt werden müssen, in einem Objekt und platziert dieses Objekt dann in der Komponente der obersten Ebene, damit es von anderen Komponenten verwendet werden kann. Sagen wir es so: Stellen Sie sich Vue als JS-Datei und Komponenten als Funktionen vor. Dann ist Vuex eine globale Variable, aber diese „globale Variable“ enthält einige spezifische Regeln.

Bei der Komponentenentwicklung von Vue stoßen wir häufig auf die Notwendigkeit, den Status der aktuellen Komponente an andere Komponenten weiterzugeben. Bei der Kommunikation zwischen übergeordneten und untergeordneten Komponenten verwenden wir normalerweise props + emit. Wenn die kommunizierenden Parteien jedoch keine Eltern-Kind-Komponenten sind oder überhaupt keine relevante Beziehung haben oder ein Zustand mit mehreren Komponenten geteilt werden muss, ist dies sehr problematisch und die Daten werden ziemlich schwierig zu pflegen sein, was sehr unfreundlich ist zu unserer Entwicklung. Vuex ist zu diesem Zeitpunkt sehr praktisch, aber nach der Verwendung von Vuex bringt es auch mehr Konzepte und Frameworks mit sich, Sie müssen also vorsichtig sein!

Was ist in Vuex?

Sprechen ist billig, zeigen Sie mir den Code. Zuerst ist hier ein Codeintervall mit so vielen Wörtern:

const store = new Vuex.Store({
  state: {
    name: 'weish',
    age: 22
  },
  getters: {
    personInfo(state) {
      return `My name is ${state.name}, I am ${state.age}`;
    }
  }
  mutations: {
    SET_AGE(state, age) {
      commit(age, age);
    }
  },
  actions: {
    nameAsyn({commit}) {
      setTimeout(() => {
        commit('SET_AGE', 18);
      }, 1000);
    }
  },
  modules: {
    a: modulesA
  }
}

Dies ist der grundlegendste und vollständigste Vuex-Code Basisobjekte:

1. Zustand: Speicherzustand. Das heißt, Variablen;

2. Getter: abgeleiteter Zustand. Das heißt, get in set und get haben zwei optionale Parameter: state und getter, die jeweils Variablen im state und andere getter abrufen können. Externe Aufrufmethode: store.getters.personInfo(). Es ähnelt den berechneten

3. Mutationen: Statusänderungen einreichen. Das heißt, set in set und get. Dies ist die einzige Möglichkeit, den Status in vuex zu ändern, aber asynchrone Vorgänge werden nicht unterstützt. Der erste Parameter ist standardmäßig „state“. Externe Aufrufmethode: store.commit('SET_AGE', 18). Ähnlich den Methoden in Vue.

4. Wirkungen: ähnlich wie bei Mutationen. Aktionen unterstützen jedoch asynchrone Vorgänge. Der erste Parameter ist standardmäßig ein Objekt mit denselben Parameterattributen wie der Speicher. Externe Aufrufmethode: store.dispatch('nameAsyn').

5. Module: Untermodul des Stores, der Inhalt entspricht einer Instanz des Stores. Die aufrufende Methode ähnelt der zuvor vorgestellten, außer dass der aktuelle Submodulname hinzugefügt werden muss, z. B.: store.a.getters.xxx().

So verwenden Sie Vuex in Vue-Cli

Im Allgemeinen verwenden wir Vue-Cli für die eigentliche Entwicklung. Die Entwicklungs- und Aufrufmethoden unterscheiden sich geringfügig.

├── index.html
├── main.js
├── components
└── store
  ├── index.js     # 我们组装模块并导出 store 的地方
  ├── state.js     # 跟级别的 state
  ├── getters.js    # 跟级别的 getter
  ├── mutation-types.js # 根级别的mutations名称（官方推荐mutions方法名使用大写）
  ├── mutations.js   # 根级别的 mutation
  ├── actions.js    # 根级别的 action
  └── modules
    ├── m1.js     # 模块1
    └── m2.js     # 模块2

state.js-Beispiel:

const state = {
  name: 'weish',
  age: 22
};

export default state;

getters.js-Beispiel (wir verwenden im Allgemeinen Getter, um den Zustand des Staates abzurufen, anstatt den Zustand direkt zu verwenden):

export const name = (state) => {
  return state.name;
}

export const age = (state) => {
  return state.age
}

export const other = (state) => {
  return `My name is ${state.name}, I am ${state.age}.`;
}

mutation- type.js-Beispiel (wir werden die Funktionsnamen aller Mutationen in diese Datei einfügen):

export const SET_NAME = 'SET_NAME';
export const SET_AGE = 'SET_AGE';

mutations.js-Beispiel:

import * as types from './mutation-type.js';

export default {
  [types.SET_NAME](state, name) {
    state.name = name;
  },
  [types.SET_AGE](state, age) {
    state.age = age;
  }
};

actions.js-Beispiel (asynchrone Vorgänge, mehrere Commits-Zeiten) :

import * as types from './mutation-type.js';

export default {
  nameAsyn({commit}, {age, name}) {
    commit(types.SET_NAME, name);
    commit(types.SET_AGE, age);
  }
};

modules--m1.js-Beispiel (wenn es sich nicht um eine sehr komplexe Anwendung handelt, wird sie im Allgemeinen nicht in Module unterteilt):

export default {
  state: {},
  getters: {},
  mutations: {},
  actions: {}
};

index.js-Beispiel (Zusammenstellung von vuex ):

import vue from 'vue';
import vuex from 'vuex';
import state from './state.js';
import * as getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';
import m1 from './modules/m1.js';
import m2 from './modules/m2.js';
import createLogger from 'vuex/dist/logger'; // 修改日志

vue.use(vuex);

const debug = process.env.NODE_ENV !== 'production'; // 开发环境中为true，否则为false

export default new vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {
    m1,
    m2
  },
  plugins: debug ? [createLogger()] : [] // 开发环境下显示vuex的状态修改
});

Zuletzt mounten Sie einfach die Store-Instanz in vue in main.js

import store from './store/index.js';

new Vue({
 el: '#app',
 store,
 render: h => h(App)
});

Bei Verwendung in Vue-Komponenten verwenden wir normalerweise MapGetters, MapActions, MapMutations und dann Sie können anrufen Diese Variablen oder Funktionen werden auf die gleiche Weise wie Vue aufgerufen und berechnet. Das Beispiel lautet wie folgt:

import {mapGetters, mapMutations, mapActions} from 'vuex';

/* 只写组件中的script部分 */
export default {
  computed: {
    ...mapGetters([
      name,
      age
    ])
  },
  methods: {
    ...mapMutations({
      setName: 'SET_NAME',
      setAge: 'SET_AGE'
    }),
    ...mapActions([
      nameAsyn
    ])
  }
};

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Interpretation der Leistungsoptimierung in JavaScript

Über das Problem, dass die Standardroute nicht in vue.js geladen wird

So konvertieren Sie zwischen Zeitstempel und Datumsformat mit js

Über das Reaktionsfähigkeitsprinzip in Vue (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation des Verwaltungsmodus Vuex in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!