Points de connaissances communs dans Vuex (résumé)-Voir.js-php.cn

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

青灯夜游

Libérer： 2020-10-07 14:11:35

avant

1707 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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(&#39;increment&#39;, {n: 100});

Copier après la connexion

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(&#39;increment&#39;);
    }
  }});// 其他组件调用actions的方法$store.dispatch(&#39;increment&#39;);

Copier après la connexion

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(&#39;increment&#39;);
    }
  }};const b = {};const store = new Vuex.Store({
  modules: {
     a,
     b  }});// 其他组件调用 （获取state的变量需要加上引入的module的别名)$store.state.a$store.state.b

Copier après la connexion

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>

Copier après la connexion

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!