Ausführliche Erklärung der einfachen Verwendung von vuex

Dieser Artikel stellt hauptsächlich die einfache Verwendung von Vuex im Detail vor. Jetzt werde ich ihn mit Ihnen teilen und Ihnen eine Referenz geben.

1 Verzeichniskonfiguration

Erstellen Sie das Store-Verzeichnis im src-Verzeichnis gemäß den offiziellen Empfehlungen

2 Erstellen Sie Dateien im Store

Erstellen Sie actions.js, getters.js, index.js, mutations.js, mutations-types.js, state.js gemäß offiziellen Empfehlungen

2.1 state.js

state.js: Es handelt sich um eine einzelne Statusnummer von Vuex, die alle Status auf Anwendungsebene in einem Objekt enthält. Bisher existiert es als „Single Source of Data (SSOT)“. Dies bedeutet auch, dass jede Anwendung nur eine Store-Instanz enthält. Ein einzelner Zustandsbaum ermöglicht es uns, jeden bestimmten Zustand direkt zu lokalisieren und während des Debuggens problemlos eine Momentaufnahme des gesamten aktuellen Anwendungszustands zu erhalten. (Wird zur Verwaltung aller Vuex-Statusdaten verwendet)

/*
* 是vuex的单一状态数，用一个对象就包含了全部的应用层级状态
* 单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。（用来管理所有vuex状态数据）
*
*/

const state = {

 // 城市状态，用来管理城市
 city: {},
 cityList: [],
 fullScreen: true,
 palyer: false
};

export default state;

2.2 mutations-types.js Zugriff auf Zeichenkonstanten im Zusammenhang mit Mutationen (einige Konstanten)

/*
* 存取mutations相关的字符常量
*
*/

// 定义常量并导出
export const SET_CITY = 'SET_CITY';
export const SET_PLAY = 'SET_PLAY';
export const SET_FULL_SCREEN = 'SET_FULL_SCREEN';
export const SET_CITY_LIST = 'SET_CITY_LIST';

2.3 mutations.js (geänderte Operationen definieren)

Die einzige Möglichkeit, den Status im Vuex-Store zu ändern, besteht darin, eine Mutation einzureichen. Mutationen in Vuex sind Ereignissen sehr ähnlich: Jede Mutation hat einen String-Ereignistyp (Typ) und eine Rückruffunktion (Handler). Mit dieser Rückruffunktion nehmen wir tatsächlich Zustandsänderungen vor und sie akzeptiert den Zustand als ersten Parameter

/*
 * 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
 * Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
 */

// 导入mutation-type.js里面所有的常量
import * as types from './mutation-types';

// 定义一个mutation可以供设置和修改值
const mutations = {

 /*
 * 1 表达式作为属性表达式放在方括号之内
 * 2 形参state （获取当前状态树的state）
 * 3 形参city，是提交mutation时传的参数
 * 4 使用mutation便于书写方便
 * 5 这个操作相当于往state.js里面写入city
  */
 [types.SET_CITY](state, city) {
  state.city = city;
 },
 [types.SET_CITY_LIST](state, list) {
  state.cityList = list;
 },
 [types.SET_FULL_SCREEN](state, flag) {
  state.fullScreen = flag;
 },
 [types.SET_PLAY](state, palyState) {
  state.palyer = palyState;
 }
};

// 导出mutation
export default mutations;

2.4 getters.js Manchmal müssen wir einen Zustand aus dem Zustand im Store ableiten.

Die Hilfsfunktion „mapGetters“ ordnet die Getter im Speicher lediglich lokal berechneten Eigenschaften zu

/*
* 有时候我们需要从 store 中的 state 中派生出一些状态
* 这里的常量主要是对state里面做一些映射
* mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性
*/

// 对state里面的属性做一些映射

export const city = state => state.city;  // 箭头函数的简写
export const cityList = state => state.cityList;
export const fullScreen = state => state.fullScreen;
export const palyer = state => state.palyer;

2.5 actions.js

Aktion ähnelt Mutation, aber der Unterschied ist:

1. Aktion übermittelt eine Mutation, anstatt den Status direkt zu ändern.

2. Aktion kann jede asynchrone Operation enthalten.

3. Das mehrmalige Ändern von Mutationen in einer Aktion kann eine Aktion kapseln

/*
* actions类似mutation
* 区别：
* 1：action提交的是mutation
* 2：action可以包含任意异步操作
*/

/*
 * 使用：
 * 1：在一个动作中多次改变mutation可以封装一个action
 */

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

export const selectList = function ({commit, state}, {list, index}) {
 commit(types.SET_CITY_LIST, list);
 commit(types.SET_PLAY, false);
 commit(types.SET_FULL_SCREEN, true);
};

2.6 index.js-Eintrag

/*
* 入口
*/

import Vue from 'vue';
import Vuex from 'vuex';

// import * as obj from 'xxxx'; 会将xxxx中所有export导出的内容组合成一个对象返回。
import * as actions from './actions';

// 拿到getters里面的映射
import * as getters from './getter';
import state from './state';
import mutations from './mutations';
import createdLogger 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,
 plugins: debug ? [createdLogger()] : []
});

3 Verwenden Sie

3.1 Registrieren Sie den Store in main.js

Registrieren Sie den Store in der neuen Vue-Instanz in main.js

3.2 Schreiben Sie den Wert To Führen Sie den syntaktischen Zucker von „mapMutations“ in die Komponente ein 🎜> in Schreiben Sie den Wert, wo nötig

import {mapMutations, mapActions} from 'vuex';

3.3 Holen Sie sich den Wert

Um den Wert in vuex zu erhalten, müssen Sie „mapGetters“ in der Komponente einführen (die Hilfsfunktion „mapGetters“ ordnet nur die Getter zu). (Speichern in lokal berechneten Eigenschaften)

MapGetter einführen

...mapMutations({
 // 这里和mutation里面的常量做一个映射
 setCity: 'SET_CITY'
})

Verwenden Sie den Objektverbreitungsoperator in berechneten Eigenschaften, um Getter in berechnete Objekte zu mischen

this.setCity(city);

Den Wert abrufen

import {mapGetters} from 'vuex';

3.4 Der Aktionseinzahlungswert

computed: {
  // 这里面的city映射的是state.js里面的city
  // 可以映射多个值
  ...mapGetters([
   'city',
   'cityList',
   'palyer',
   'fullScreen'
  ])
 }

wird dort verwendet, wo er eingezahlt werden muss

created() {
  console.log(this.city);
  console.log(this.cityList[1]);
  console.log(this.palyer);
  console.log(this.fullScreen);
 }

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

Verwandte Artikel:

Zwei Möglichkeiten für die Vue-Einzelseitenanwendung, auf separate Stildateien zu verweisen

Basierend auf dem Speicherschlüsselwert in js Einführung und Vorsichtsmaßnahmen

Ein Beispiel für die Datenkommunikation mit Angular4 Shared Service in mehreren Komponenten

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der einfachen Verwendung von vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!