Explication détaillée et exemples d'utilisation de Vuex pour gérer l'état global dans Vue

Vue.js est un framework frontal populaire qui offre de nombreuses fonctionnalités pratiques, mais lorsque l'application devient de plus en plus complexe, nous constaterons bientôt qu'il devient très difficile de transmettre de grandes quantités de données aux composants enfants. C'est pourquoi Vuex devient si important dans Vue. Vuex est un gestionnaire d'état global qui facilite le partage de données et d'état. Dans cet article, nous examinerons de plus près le fonctionnement de Vuex et démontrerons comment l'intégrer dans votre application Vue.

Qu'est-ce que Vuex

Vuex est un modèle de gestion d'état et une bibliothèque pour les applications Vue.js. Il est souvent utilisé pour résoudre des problèmes multi-niveaux, multi-composants et multi-. problèmes de partage de l'état de la page. Il centralise l'état de l'application dans un seul magasin et fournit un mécanisme pour implémenter l'état partagé. Utilisé pour gérer tous les états d'une application tout au long de son cycle de vie.

Le concept de base de Vuex

Vuex se compose des quatre parties principales suivantes :

state

State est Vuex zone de stockage de l’état de l’application de gestion. L'état est un simple objet JavaScript utilisé pour stocker l'état d'une application. Lors de la déclaration d'un état, nous définissons un objet. L'exemple suivant définit un objet d'état simple :

const state = {
    count: 0
}

getter

Getter est utilisé pour obtenir des données de l'état. Les données obtenues peuvent être traitées en fonction de l'état actuel renvoyé. plus tard, similaire aux propriétés calculées de l'état.

const getters = {
  getCount(state) {
    return state.count + 1;
  }
}

mutations

La mutation est utilisée pour assurer un fonctionnement unidirectionnel des données, c'est-à-dire que les mutations peuvent modifier les données, mais ne peuvent pas obtenir les données. La mutation est utilisée pour modifier l'état et ne peut pas fonctionner de manière asynchrone. Pour modifier l'état, vous devez utiliser la méthode de validation.

const mutations = {
  increment(state) {
    state.count++
  }
}

actions

Les actions sont utilisées pour gérer les opérations asynchrones. Les actions déclenchent en fait des mutations standard. Il vous permet d'encapsuler toutes les mises à jour concernant l'état sans le modifier directement. Par exemple, si nous voulons envoyer une requête asynchrone dans l’application, nous pouvons appeler une action côté pour la gérer.

const actions = {
   incrementByAsync({commit}) {
     setTimeout(() => {
       commit('incrementByAsync')
     }, 1000)
   }
 }

Implémentation d'un contre-exemple Vuex

Nous utiliserons mon propre exposé [Vue-cli 3](https://www.npmjs.com/package/vue- cli ) Exemple de projet, initialisez un projet Vue via un échafaudage officiel.

$ vue create vuex-example

Ensuite, installez vuex :

$ npm install vuex --save

Ensuite, nous créerons un exemple simple d'application de compteur pour des nombres croissants et décroissants. Cependant, nous utiliserons Vuex pour gérer l'état de ce compteur. Tout d’abord, nous allons créer un nouveau fichier store.js sous le dossier src du projet. Ceci est notre magasin Vuex.

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

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        },
        decrement(state) {
            state.count--;
        }
    },
    actions: {
        increment({commit}) {
            commit('increment');
        },
        decrement({commit}) {
            commit('decrement');
        }
    },
    getters: {
        getCount(state) {
            return state.count;
        }
    }
});

export default store;

Dans le code ci-dessus, nous avons d'abord importé Vuex et Vue. Ensuite, nous avons installé Vuex en utilisant la méthode Vue.use(). Nous définissons un objet d'état simple pour stocker la valeur actuelle du compteur. Nous définissons également deux mutations, qui sont utilisées pour augmenter et diminuer la valeur actuelle du compteur. Nous définissons deux actions, une pour effectuer une opération d'augmentation et une autre pour effectuer une opération de diminution. Enfin, nous définissons un getter pour obtenir la valeur actuelle du compteur.

Ensuite, nous validons les modifications et utilisons vuex et stockons dans App.vue :

<template>
  <div id="app">
    <h3>{{ count }}</h3>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import store from './store';

export default {
  name: 'app',
  store,
  computed: {
    count() {
      return this.$store.getters.getCount;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    },
    decrement() {
      this.$store.dispatch('decrement');
    }
  }
};
</script>

Dans ce fichier, nous importons le module de magasin Vuex. Dans l'instance Vue, nous mélangeons l'objet store afin que l'état Vuex puisse être utilisé dans toute l'application. Ensuite, nous définissons une propriété calculée pour obtenir la valeur actuelle du compteur. Nous définissons également deux méthodes pour incrémenter et décrémenter la valeur actuelle du compteur. Nous utilisons la méthode dispatch pour appeler ces actions séparément.

Enfin, nous passons le magasin à l'instance vue afin que l'état du magasin soit accessible dans l'application. Vous pouvez maintenant ouvrir votre navigateur, accéder à l'application et vous verrez un simple compteur et lorsque vous cliquez sur le bouton, il augmentera ou décrémentera la valeur actuelle du compteur.

Summary

Vuex est un modèle de gestion d'état et une bibliothèque pour les applications Vue.js qui facilitent le partage de données et d'états. L'état, le getter, la mutation et l'action sont les concepts fondamentaux de Vuex. Une maîtrise approfondie peut rendre les développeurs plus flexibles dans la gestion des changements d'état dans Vuex. Sur cette base, nous avons construit un exemple de programme de minuterie pour démontrer l'utilisation de Vuex. Si vous souhaitez apprendre Vuex plus en profondeur, consultez sa documentation officielle.

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!