Points de connaissances communs dans Vuex (résumé)

Si vous avez déjà utilisé vue.js, vous devez connaître la difficulté de transmettre des valeurs entre les composants dans vue. Dans vue, nous pouvons utiliser vuex pour enregistrer l'état dont nous avons besoin. manage. Value, jetons un coup d'œil à quelques points de connaissances couramment utilisés dans vuex, j'espère que cela sera utile à tout le monde.

1. Pourquoi utiliser Vuex

1. Plusieurs composants reposent sur le même état, et l'utilisation de méthodes de communication entre les composants sera très lourde, comme l'imbrication multicouche. composants.

2. Données qui doivent être enregistrées globalement, telles que les utilisateurs, les informations d'autorisation, les paramètres système globaux

2. >1 , state : état de stockage

// store.jsconst store = new Vuex.Store({
  state: {
    count: 0
  }});// 组件里获取count值$store.state.count

2. getters : state comme premier paramètre, autres getters comme deuxième paramètre, la valeur de retour sera mise en cache en fonction de ses dépendances, équivalentes aux propriétés calculées de Vue

// store.jsconst store = new Vuex.Store({
  state: {
    count: 1，
    sum: 2
  },
  getters: {
    getCountAndSum： (state,getters) => {
      return state.count + state.sum;
    }
  }});// 其他组件获取getter$store.getters.getCountAndSum

3. Mutations : modifier l'état (de manière synchrone), état comme premier paramètre, soumettre la charge utile comme deuxième paramètre

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  }});// 其他组件调用mutations的方法$store.commit('increment', {n: 100});

4. actions : opérations asynchrones (méthodes d'exécution de mutations, pas de changement direct). statut)

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  },
  actions: {
    increment (context) {
      context.commit('increment');
    }
  }});// 其他组件调用actions的方法$store.dispatch('increment');

5. modules : sous-module de magasin

const a = {
  state: {
    count: 0
  },
  getters: {
    getCount2 (state, getters, rootState) {
      return state.count + 2;
    }
  },
  mutations: {
    increment (state, getters, rootState) {
      state.count++;  
    }
  },
  actions: {
    increment (context) {
      // context.state.count;
      // context.rootState.count;
      context.commit('increment');
    }
  }};const b = {};const store = new Vuex.Store({
  modules: {
     a,
     b  }});// 其他组件调用 （获取state的变量需要加上引入的module的别名)$store.state.a$store.state.b

3. Fonction auxiliaire Vuex

<template>
  <div class="about">
    <h1>count: <span>{{count}}</span></h1>
    <h1>getCount: <span>{{$store.getters.getCount}}</span></h1>
    <h1>sum: <span>{{sum}}</span></h1>
    <h1>getSum: <span>{{$store.getters.getSum}}</span></h1>
    <button @click="clickB">test    </button>
  </div></template><script>import {mapState, mapGetters, mapMutations, mapActions} from &#39;vuex&#39;; 
export default {
  name: &#39;about&#39;,
  data () {
    return {
      count: 0,
      sum: 0
    }
  },
  computed: {
    ...mapState({
      count: state => state.count,
      countAlias: &#39;count&#39;,
      countPlusLocalState (state) {
        return state.count + this.localCount;
      }
    }),
    ...mapGetters([
      &#39;getCount&#39;, &#39;getSum&#39;
    ])
  },
  mounted () {
    this.count = this.$store.state.count;
    this.sum = this.$store.state.a.sum;

  },
  methods:{
    ...mapMutations(
      &#39;add&#39;,&#39;addO&#39;
    ),
    ...mapActions([
      &#39;add&#39;,&#39;addO&#39;
    ]),
    clickB () {
      this.$store.dispatch(&#39;add&#39;);
      this.$store.dispatch(&#39;addO&#39;);
    }
  }
}</script>

Recommandations associées :

Un résumé des questions d'entretien Front-end Vue en 2020 (avec réponses)

Recommandation du didacticiel Vue : les 5 derniers didacticiels vidéo vue.js en 2020 Sélectionnez

Pour plus de connaissances liées à 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!