Partage pratique sur l'utilisation de vuex pour gérer le statut global dans Vue

Vue est un framework front-end populaire, son idée de base est de diviser la page en différents composants, chaque composant a son propre état. Cependant, il existe des situations dans lesquelles nous devons partager l'état entre plusieurs composants. Pour faire face à cette situation, Vue fournit vuex, une bibliothèque tierce spécialement conçue pour gérer l'état global de l'application. Dans cet article, nous partagerons quelques expériences pratiques d'utilisation de vuex dans les projets Vue.

Qu'est-ce que Vuex ?

Vuex est l'outil officiel de gestion d'état pour Vue.js. Il utilise un stockage centralisé pour gérer l'état de tous les composants de l'application, implémentés via un seul objet.

Les concepts de base de Vuex incluent :

• State : stocke l'état au niveau de l'application.
• Getter : obtenez la valeur stockée dans l'état et effectuez des calculs.
• Mutation : modifiez la valeur dans l'état.
• Action : soumettez la mutation et effectuez une opération asynchrone.
• Module : Décomposez le magasin en plusieurs sous-modules, chaque module peut avoir son propre état, mutation, action

Utilisation de Vuex dans un projet Vue

Pour démontrer le processus d'utilisation de Vuex dans un projet Vue, nous allons créer un exemple d'application simple, appelons-le "ToDo List", cette application nous permet d'ajouter et de supprimer des tâches et de les afficher dans une liste de tâches. Ci-dessous, nous expliquerons comment utiliser Vuex pour implémenter cette application ToDo List.

Tout d'abord, pour utiliser Vuex, nous devons l'importer dans notre application Vue. Nous pouvons importer et injecter l'objet Vuex dans main.js comme indiqué ci-dessous :

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    tasks: []
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task)
    },
    removeTask(state, index) {
      state.tasks.splice(index, 1)
    }
  }
})

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

Ici, nous importons d'abord Vuex et l'injectons dans l'objet Vue. Ensuite, nous allons créer une constante appelée store qui crée une nouvelle instance de stockage Vuex à l'aide du constructeur Vuex.Store. Nous définissons ici l'état et les mutations de notre magasin. Notre statut est le tableau des tâches, qui stocke les tâches dans notre liste de tâches. Nos mutations incluent addTask et removeTask, qui sont utilisées respectivement pour ajouter et supprimer des tâches.

Nous injectons également le store dans l'instance Vue afin de pouvoir l'utiliser dans tous les composants de notre application. Désormais, nous pouvons accéder à l'état et aux mutations du magasin dans notre composant.

Dans notre exemple d'application ToDo List, nous avons un composant appelé AddTask.vue qui contient un formulaire qui permet à l'utilisateur d'ajouter des tâches. Dans ce composant, nous pouvons utiliser $store pour accéder à l'état et aux mutations dans le magasin, et déclencher notre mutation addTask pour ajouter la tâche au magasin. Le code est le suivant :

<template>
  <form @submit.prevent="addTask">
    <input type="text" v-model="task" />
    <button type="submit">Add Task</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      task: ''
    }
  },
  methods: {
    addTask() {
      this.$store.commit('addTask', this.task)
      this.task = ''
    }
  }
}
</script>

Ici, nous utilisons un formulaire dans le composant, et lorsque le formulaire est soumis, nous appelons la méthode addTask et passons le nom de la tâche en paramètre à la méthode $store.commit. Cela déclenche la mutation addTask que nous avons définie précédemment pour ajouter la tâche au magasin.

Ensuite, nous avons un composant TasksList.vue qui affiche une liste de tâches et permet à l'utilisateur de supprimer des tâches. Dans ce composant, nous pouvons utiliser $store pour accéder à l'état et aux mutations dans le magasin, et déclencher notre mutation removeTask pour supprimer la tâche du magasin. Le code est le suivant :

<template>
  <ul>
    <li v-for="(task, index) in tasks" :key="index">
      {{ task }}
      <button @click="removeTask(index)">Remove Task</button>
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    tasks() {
      return this.$store.state.tasks
    }
  },
  methods: {
    removeTask(index) {
      this.$store.commit('removeTask', index)
    }
  }
}
</script>

Ici, nous utilisons un attribut calculé pour obtenir l'état du tableau de tâches dans le magasin. Nous utilisons également la directive v-for dans le modèle pour afficher chaque tâche et ajoutons un bouton de suppression après chaque tâche. Lorsque l'utilisateur clique sur un bouton de suppression, nous appelons la méthode removeTask et transmettons l'index de la tâche en tant que paramètre à la méthode $store.commit. Cela déclenche la mutation RemoveTask que nous avons définie précédemment, qui supprime la tâche du magasin.

Conclusion

Dans cet article, nous avons appris à utiliser Vuex pour gérer l'état global de notre application et avons démontré comment l'utiliser réellement dans un projet Vue via une application ToDo List. Dans un projet Vue, l'utilisation de Vuex nous permet de gérer et de partager l'état plus facilement, et rend notre code plus modulaire et plus lisible. Si vous développez également un projet Vue, vous souhaiterez peut-être envisager d'utiliser Vuex pour mieux gérer l'état de votre application !

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!