Tutoriel de démarrage VUE3 : Utiliser la gestion d'état Vuex pour implémenter la gestion globale des données

Avec le développement continu de Vue.js, Vue 3 a également été officiellement lancée et a progressivement été largement utilisée. Par rapport à Vue 2, Vue 3 présente de nombreuses optimisations, telles que l'utilisation d'objets proxy pour proxy des données afin de réaliser l'interception et le détournement de données. Cependant, dans les applications pratiques, étant donné que les grands projets d'application comportent souvent de nombreux composants, la gestion de l'état global devient de plus en plus importante. Pour le moment, Vuex est une très bonne solution.

1. Introduction à Vuex

Vuex est la bibliothèque officielle de gestion d'état de Vue.js, conçue pour résoudre le problème du partage d'état (données) entre plusieurs composants dans les applications Vue. Ses concepts fondamentaux incluent :

• État : données qui doivent être gérées globalement dans l'application.
• Getter (value getter) : utilisé pour dériver un état à partir d'un état (similaire à la propriété calculée dans un composant).
• Mutation (mutation) : utilisé pour modifier les données dans l'état. Puisque les données Vuex sont mises à jour de manière synchrone dans la mutation, la cohérence des données peut être garantie.
• Action : Semblable à la mutation, elle est également utilisée pour modifier les données dans l'état, mais elle peut fonctionner de manière asynchrone et peut être utilisée pour lancer des opérations asynchrones telles que des requêtes réseau.

Grâce à l'utilisation flexible de ces concepts de base, Vuex peut nous aider à gérer les données globales, simplifiant ainsi le transfert et le fonctionnement entre les composants.

2. Créer un magasin Vuex

Les données dans Vuex sont stockées dans l'objet magasin, nous devons donc d'abord créer un objet magasin. Dans Vue 3, la manière de créer des objets de magasin est légèrement différente de Vue 2.

import { createStore } from 'vuex'; // 导入createStore方法

const store = createStore({
  state() {
    // 定义state对象
    return {
      count: 0
    }
  },
  mutations: {
    // 定义mutation方法
    increment(state) {
      state.count++;
    }
  },
  actions: {
    // 定义action方法
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    }
  },
  getters: {
    // 定义getter方法
    doubleCount(state) {
      return state.count * 2;
    }
  }
})

export default store; // 导出store对象

Dans le code ci-dessus, nous avons créé un objet store via la méthode createStore et transmis un objet. L'objet contient quatre attributs : état, mutations, actions et getters. Parmi eux, l'attribut state définit la valeur initiale du nombre d'états global comme 0 ; l'attribut mutations définit un incrément de méthode de mutation, qui implémente la fonction d'augmenter la valeur du compte de 1 ; l'attribut actions définit une méthode d'action incrémentAsync, qui implémente la fonction d'augmentation de la valeur du compte. l'incrément asynchrone de la valeur de comptage. La fonction 1 ; l'attribut getters définit une méthode getter doubleCount, qui renvoie deux fois la valeur de comptage.

3. Utiliser Vuex dans les composants

Après avoir créé l'objet store, nous pouvons utiliser ses données et méthodes directement dans le composant. Dans Vue 3, vous pouvez utiliser la syntaxe <script setup> pour utiliser les données et les méthodes dans Vuex.

<script setup>
import { useStore } from 'vuex';

const store = useStore();

function handleClick() {
  store.commit('increment');
}

</script>

<template>
  <div>
    <p>count: {{store.state.count}}</p>
    <p>double count: {{store.getters.doubleCount}}</p>
    <button @click="handleClick">increment</button>
  </div>
</template>

Dans le code ci-dessus, nous avons obtenu l'objet store via la fonction useStore et appelé la méthode d'incrémentation dans la méthode handleClick pour modifier la valeur du comptage. Dans le modèle, nous pouvons obtenir la valeur de comptage via store.state.count et obtenir le double de la valeur de comptage via store.getters.doubleCount.

4. Résumé

Grâce à l'introduction de cet article, nous pouvons comprendre les concepts de base et l'utilisation de Vuex. Dans le développement réel, si l'application doit gérer une grande quantité de données globales, l'utilisation de Vuex est un bon choix, ce qui peut grandement simplifier l'interaction entre les composants et améliorer l'efficacité du développement.

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!