A quoi sert vuex ?

Vuex est une bibliothèque de gestion d'état basée sur le framework Vue. Elle peut gérer l'état des données d'applications complexes et faciliter le partage de données entre les composants, comme la communication entre les composants frères et la transmission de valeurs imbriquées multicouches. , etc. ; 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.

Vuex est un modèle de gestion d'état développé spécifiquement pour les applications Vue.js. Il s'agit d'une bibliothèque de gestion d'état basée sur le framework vue. Il peut gérer l'état des données d'applications complexes et faciliter le partage de données entre les composants, comme la communication entre les composants frères, le transfert de valeur entre les composants imbriqués multicouches, etc.

Vuex 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.

Vuex est également intégré à l'outil de débogage officiel de Vue extension devtools, fournissant des fonctions de débogage avancées telles que le débogage de voyage dans le temps sans configuration, l'importation et l'exportation d'instantanés d'état, etc.

Fonctionnalités de base de Vuex

(1)État : fournit la seule source de données publique et toutes les données partagées doivent être stockées dans l'État dans le magasin

La manière d'accéder à State dans le composant :

A.this.$store.state Le nom global des données est tel que : this.$store.state.count

. B. Importez d'abord la fonction mapState si nécessaire : import { mapState } from 'vuex'

Ensuite, les données sont mappées aux attributs calculés : calculated:{ ...mapState(['global data name']) }

( 2) Mutation : utilisé pour modifier les données dans $store

Utilisation :

Ouvrez le fichier store.js et ajoutez le code suivant dans mutations :

mutations: {
    add(state,step){
      //第一个形参永远都是state也就是$state对象
      //第二个形参是调用add时传递的参数
      state.count+=step;
    }
  }

Ensuite, ajoutez le code d'événement au bouton dans Addition.vue comme suit :

<button @click="Add">+1</button>

methods:{
  Add(){
    //使用commit函数调用mutations中的对应函数，
    //第一个参数就是我们要调用的mutations中的函数名
    //第二个参数就是传递给add函数的参数
    this.$store.commit(&#39;add&#39;,10)
  }
}

La deuxième façon d'utiliser les mutations :

import { mapMutations } from ‘vuex’
methods:{…mapMutations([‘add’])}

est la suivante :

import { mapState,mapMutations } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //获得mapMutations映射的sub函数
      ...mapMutations(['sub']),
      //当点击按钮时触发Sub函数
      Sub(){
          //调用sub函数完成对数据的操作
          this.sub(10);
      }
  },
  computed:{
      ...mapState(['count'])
      
  }
}

(3 )Action : Vous ne pouvez pas écrire de code asynchrone dans les mutations, ce qui provoquera des erreurs d'affichage dans le débogueur vue. Dans vuex, nous pouvons utiliser Action pour effectuer des opérations asynchrones.

Les étapes sont les suivantes :

Ouvrez le fichier store.js et modifiez l'action comme suit :

actions: {
  addAsync(context,step){
    setTimeout(()=>{
      context.commit('add',step);
    },2000)
  }
}

Ajoutez ensuite le code d'événement au bouton dans Addition.vue comme suit :

<button @click="AddAsync">...+1</button>

methods:{
  AddAsync(){
    this.$store.dispatch(&#39;addAsync&#39;,5)
  }
}

(4) Getter : utilisé pour traiter les données dans le Store pour former de nouvelles données.

Il enveloppera uniquement les données enregistrées dans le Store et ne modifiera pas les données enregistrées dans le Store. Lorsque les données dans le Store changent, le contenu généré par le Getter changera également en conséquence.

Ouvrez le fichier store.js et ajoutez des getters, comme suit :

export default new Vuex.Store({
  .......
  getters:{
    //添加了一个showNum的属性
    showNum : state =>{
      return '最新的count值为：'+state.count;
    }
  }
})

Ensuite, ouvrez Addition.vue et ajoutez des expressions d'interpolation à l'aide de getters

<h3>{{$store.getters.showNum}}</h3>

Vous pouvez également l'importer dans Addition. vue. mapGetters, et mappez-le aux attributs calculés

import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}

Recommandations associées :

Résumé des questions d'entretien avec vue frontale 2020 (avec réponses)

Recommandation du didacticiel Vue : les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter :

Programmation Enseignement ! !

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!