Explication détaillée de l'utilisation simple de vuex

Cet article présente principalement en détail l'utilisation simple de vuex. Maintenant, je vais le partager avec vous et vous donner une référence.

1 Configuration du répertoire

Créer le répertoire du magasin dans le répertoire src selon les recommandations officielles

2 Créer des fichiers dans le magasin

Créer actions.js, getters.js, index.js, mutations.js, mutations-types.js, state.js selon les recommandations officielles

2.1 state.js

state.js : il s'agit d'un numéro d'état unique de vuex, qui contient tous les états au niveau de l'application dans un seul objet. Jusqu'à présent, il existe en tant que « source unique de données (SSOT) ». Cela signifie également que chaque application ne contiendra qu'une seule instance de magasin. Une seule arborescence d'état nous permet de localiser directement n'importe quel élément d'état spécifique et d'obtenir facilement un instantané de l'ensemble de l'état actuel de l'application pendant le débogage. (Utilisé pour gérer toutes les données d'état vuex)

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

const state = {

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

export default state;

2.2 mutations-types.js Accéder aux constantes de caractères liées aux mutations (certaines constantes)

/*
* 存取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 (Modification de la définition opération)

La seule façon de changer l'état dans le magasin Vuex est de soumettre une mutation. Les mutations dans Vuex sont très similaires aux événements : chaque mutation a un type d'événement de chaîne (type) et une fonction de rappel (gestionnaire). Cette fonction de rappel est l'endroit où nous effectuons réellement des changements d'état, et elle acceptera l'état comme premier paramètre

/*
 * 更改 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 Parfois, nous devons dériver un état à partir de l'état dans le magasin.

La fonction auxiliaire mapGetters mappe simplement les getters du magasin aux propriétés calculées locales

/*
* 有时候我们需要从 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

L'action est similaire à la mutation, mais la différence est :

1. L'action soumet une mutation au lieu de changer directement l'état.

2. L'action peut contenir n'importe quelle opération asynchrone.

3. Changer les mutations plusieurs fois en une seule action peut encapsuler une action

/*
* 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);
};

Entrée index.js 2.6

/*
* 入口
*/

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 Utilisez

3.1 Enregistrez le magasin dans main.js

Enregistrez le magasin dans la nouvelle instance Vue dans main.js

3.2 Pour écrire un valeur, vous devez introduire le sucre syntaxique de mapMutations dans le composant

Introduire le sucre syntaxique

import {mapMutations, mapActions} from 'vuex';

Dans les méthodes, la fonction auxiliaire mapMutations mappe les méthodes du composant au store.commit call

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

Écrivez la valeur là où c'est nécessaire

this.setCity(city);

3.3 Obtenir la valeur

Pour obtenir la valeur dans vuex, vous devez introduire mapGetters dans le composant ( La fonction auxiliaire de mapGetters est simplement de mapper les getters en magasin avec les propriétés calculées locales)

Introduire mapGetters

import {mapGetters} from 'vuex';

Utiliser l'opérateur de répartition d'objets dans les propriétés calculées calculées pour mélanger les getters dans les objets calculés

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

Obtenir la valeur

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

Action 3.4 pour déposer la valeur

...mapActions(['selectList'])

Utilisez-la là où vous devez la déposer

this.selectList({
 list: this.citys,
 index: 1
});

Le ci-dessus est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Deux façons pour l'application Vue d'une seule page de référencer des fichiers de style distincts

En fonction de la valeur de la clé de stockage dans js Introduction et précautions

Un exemple de communication de données de service partagé Angular4 dans plusieurs composants

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!