En savoir plus sur l'état et les getters dans Vuex

Les organes internes de Vuex sont composés de cinq parties : State, Getter, Mutation, Action et Module. Cet article vous donnera d'abord une compréhension approfondie de State et Getter dans Vuex. J'espère qu'il vous sera utile !

Vuex_State

Vuex est un outil de gestion d'état pour vue, afin de permettre à plusieurs composants de partager plus facilement leur état. [Recommandation associée : "tutoriel vue.js"]

Installer

npm install vuex --save复制代码

Utiliser

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

Vue.use(Vuex);const store = new Vuex.Store({  state: {    count: 0
  }
})new Vue({
  store,
})

State

Une arborescence d'état unique, utilisant un objet pour contenir tous les états au niveau de l'application.

Obtenir l'état de Vuex dans le composant Vue

Vuex fournit un mécanisme pour "injecter" l'état du composant dans chaque sous-composant via l'option de magasin (appelez Vue.use(Vuex)).

En enregistrant l'option store dans l'instance racine, l'instance store sera injectée dans tous les sous-composants sous le composant racine, et les sous-composants seront accessibles via this.$store.

1832d1c4a53e5db59fd2eed60b317a8f
  {{ $store.state.count }}16b28748ea4df4d9c2150843fecfba68复制代码

fonction d'assistance mapState

Lorsqu'un composant doit obtenir plusieurs états, déclarer ces états en tant que propriétés calculées sera quelque peu répétitif et redondant. Pour résoudre ce problème, nous pouvons utiliser la fonction d'assistance mapState pour nous aider à générer des propriétés calculées :

import { mapState } from 'vuex';

computed: {
  ...mapState(['count']),
},

Utilisez des noms différents :

computed: {
  ...mapState({
    storeCount: state => state.count,
     // 简写
    storeCount: 'count',  // 等同于 state => state.count
  }),
},

Vuex_Getter

propriétés calculées du magasin. La valeur de retour du getter sera mise en cache en fonction de ses dépendances, et ne sera recalculée que lorsque ses valeurs de dépendance changeront.

Getter reçoit l'état comme premier paramètre et les getters comme deuxième paramètre.

getters: {
  doubleCount (state) {    return state.count * 2;
  }
}

Accès via les attributs

Getter sera exposé en tant qu'objet store.getters : this.$store.getters.doubleCount

Accès via les méthodes

Vous pouvez également laisser le getter renvoyer une fonction pour transmettre des paramètres au getter

getters: {
  addCount: state => num => state.count + num;
}

this.$store.addCount(3);

fonction auxiliaire mapGetters

import { mapsGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'doubleCount',
      'addCount',
    ])
  }
}

Si vous souhaitez donner un autre nom à une propriété getter, utilisez le formulaire objet :

mapGetters({
   // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount` 
  storeDoubleCount: 'doubleCount'
})

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

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!