Interprétation détaillée du mode de gestion vuex dans vue

Cet article présente principalement la compréhension approfondie du modèle de gestion d'état de Vue, vuex. L'éditeur pense qu'il est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil

vuex est un mode de gestion d'état spécialement conçu pour vue.js, et peut également être débogué à l'aide de devtools.

Remarque : les exemples et autres codes de cet article utiliseront la syntaxe es6.

Lien

1. Site officiel chinois de vuex

2. Un centre commercial simple implémenté en utilisant vue et vuex, pour référence seulement

Qu'est-ce que vuex ?

Première citation du site officiel de vuex :

Vuex est un modèle de gestion d'état développé spécifiquement pour les applications Vue.js. Il utilise un stockage centralisé pour gérer l'état de tous les composants de l'application et utilise les règles correspondantes pour garantir que l'état change de manière prévisible.

Le mode de gestion de l'état et la gestion centralisée du stockage semblent très haut de gamme et effrayants à première vue. À mon avis, vuex stocke toutes les variables qui doivent être partagées dans un objet, puis place cet objet dans le composant de niveau supérieur pour être utilisé par d'autres composants. Disons-le ainsi, considérons vue comme un fichier js et les composants comme des fonctions, alors vuex est une variable globale, mais cette "variable globale" contient des règles spécifiques.

Dans le développement de composants de Vue, nous rencontrons souvent le besoin de transmettre le statut du composant actuel à d'autres composants. Lors de la communication entre les composants parent et enfant, nous utilisons généralement props + submit. Mais lorsque les parties communicantes ne sont pas des composants parent-enfant ou n'ont même aucune relation pertinente, ou qu'un état doit être partagé avec plusieurs composants, cela sera très gênant et les données seront assez difficiles à maintenir, ce qui est très hostile. à notre développement. vuex est très pratique en ce moment, mais après avoir utilisé vuex, il apporte également plus de concepts et de frameworks, il faut donc être prudent !

Qu'y a-t-il dans vuex ?

Parler ne coûte pas cher, montrez-moi le code Tout d'abord, voici une section de code avec autant de mots :

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
  }
}

C'est le code vuex le plus basique et le plus complet ; vuex contient Il existe cinq objets de base :

1. state : stocke l'état. C'est-à-dire des variables ;

2. getters : état dérivé. Autrement dit, get in set et get ont deux paramètres facultatifs : state et getters, qui peuvent respectivement obtenir des variables dans state et d'autres getters. Méthode d'appel externe : store.getters.personInfo(). C'est similaire aux

3. mutations calculées par vue : soumettre les modifications de statut. Autrement dit, défini dans set et get. C'est le seul moyen de modifier l'état dans vuex, mais il ne prend pas en charge les opérations asynchrones. Le premier paramètre est par défaut state. Méthode d'appel externe : store.commit('SET_AGE', 18). Similaire aux méthodes en vue.

4. actions : similaires aux mutations. Toutefois, les actions prennent en charge les opérations asynchrones. Le premier paramètre est par défaut un objet avec les mêmes attributs de paramètre que le magasin. Méthode d'appel externe : store.dispatch('nameAsyn').

5. modules : sous-module de boutique, le contenu est équivalent à une instance de boutique. La méthode d'appel est similaire à celle introduite précédemment, sauf que le nom du sous-module actuel doit être ajouté, tel que : store.a.getters.xxx().

Comment utiliser vuex dans vue-cli

De manière générale, nous utiliserons vue-cli pour le développement réel dans vue -cli, les méthodes de développement et d'appel sont légèrement différentes.

├── 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

Exemple state.js :

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

export default state;

Exemple getters.js (nous utilisons généralement des getters pour obtenir l'état de l'état au lieu d'utiliser directement l'état) :

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}.`;
}

Exemple de mutation-type.js (nous mettrons les noms de fonctions de toutes les mutations dans ce fichier) :

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

Exemple de mutations.js :

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 . exemple js (fonctionnement asynchrone, commits multiples) :

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

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

modules--exemple m1.js (si ce n'est pas une application très complexe, en général elle ne sera pas divisée en modules) :

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

Exemple index.js (assemblage de 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的状态修改
});

Enfin, montez simplement l'instance du magasin sur vue dans main.js

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

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

Lorsqu'il est utilisé dans vue composants, nous utilisons généralement mapGetters, mapActions et mapMutations, et nous pouvons ensuite appeler ces variables ou fonctions de la même manière que vue appelle les méthodes et calcule. L'exemple est le suivant :

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

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

Ce qui précède est. moi, je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles associés :

Interprétation détaillée de l'optimisation des performances en JavaScript

À propos du problème de non-chargement de la route par défaut dans vue.js

Comment convertir entre le format d'horodatage et de date à l'aide de js

À propos du principe de réactivité dans Vue (tutoriel détaillé)

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!