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

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

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

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

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

import { mapState,mapMutations } from 'vuex'

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

Les étapes sont les suivantes :

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

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

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

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

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

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

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

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!