Gérer State avec Vuex in Vue.js- Guide complet et exemples concrets

Vuex est une state bibliothèque de gestion pour Vue.js les applications, vous permettant de gérer et de synchroniser les données entre les différents component s de votre application. Vuex implémente l'architecture Flux, ce qui rend la gestion de l'application simple et efficace state.

 

Les concepts clés Vuex incluent

1. State

Le state in Vuex représente le magasin de données centralisé pour votre application. Il contient les données de l'application qui doivent être partagées entre différents component s. Voici un exemple de définition de a state dans Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: {  
    count: 0,  
    todos: []  
  }  
});

 

2. Mutations

Mutations sont responsables de la modification du state in Vuex. Ce sont des fonctions synchrones qui prennent le courant state et la charge utile comme arguments. Voici un exemple de définition d'une mutation dans Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {  
    increment(state) {
      state.count++;  
    },  
    decrement(state) {
      state.count--;  
    }  
  }  
});

 

3. Actions

Actions sont utilisés pour gérer les opérations asynchrones et dispatcher mutations pour modifier le state. Ils peuvent contenir des appels d'API, des tâches asynchrones ou une logique complexe. Voici un exemple de définition d'une action dans Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: { /* mutations definition */ },
  actions: {  
    async fetchData({ commit }) {  
      const response = await fetch('https://api.example.com/data');  
      const data = await response.json();  
      commit('updateData', data);  
    }  
  }  
});

 

4. Getters

Getters vous permettent de récupérer et de calculer les dérivés state du Vuex magasin. Ils sont utiles pour accéder aux données et les manipuler avant de les renvoyer au component s. Voici un exemple de définition d'un getter dans Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { todos: [...] },
  getters: {  
    completedTodos(state) {  
      return state.todos.filter(todo => todo.completed);  
    },  
    todoCount(state) {  
      return state.todos.length;  
    }  
  }  
});

 

Pour installer Vuex dans votre Vue.js projet, vous pouvez suivre ces étapes

Étape 1 : Installer Vuex via npm ou yarn :

npm install vuex

ou

yarn add vuex

Étape 2: Créez un store.js  fichier dans le répertoire racine de votre projet. C'est ici que nous allons déclarer et gérer l'application state.

Étape 3 : Dans le store.js  fichier, importez Vuex et créez un nouvel objet de magasin :

import Vue from 'vue';  
import Vuex from 'vuex';  
  
Vue.use(Vuex);  
  
const store = new Vuex.Store({  
  // Declare your states, getters, mutations, and actions here  
});  
  
export default store;

Étape 4 : Dans le main.js  fichier, importez le magasin et liez-le à votre application Vue :

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

Étape 5 : Vous avez maintenant installé et configuré Vuex votre projet. Vous pouvez déclarer vos state s, getters, mutations et actions dans le store.js fichier et les utiliser dans vos Vue component s.

Exemple:

Dans le store.js  fichier, vous pouvez déclarer un simple state et une mutation comme ceci:

const store = new Vuex.Store({
  state: {  
    count: 0  
  },  
  mutations: {  
    increment(state) {
      state.count++;  
    }  
  }  
});

Dans un Vue component, vous pouvez utiliser la state mutation and en utilisant les  fonctions  and: mapState mapMutations

import { mapState, mapMutations } from 'vuex';  
  
export default {  
  computed: {  
    ...mapState(['count'])  
  },  
  methods: {  
    ...mapMutations(['increment'])  
  }  
};

Avec ces étapes, vous avez installé avec succès Vuex et pouvez l'utiliser pour gérer le state de votre Vue.js application.

 

Avec Vuex, vous pouvez facilement et systématiquement gérer l'application state. Il améliore la maintenabilité et la réutilisabilité du code, tout en offrant une approche structurée de la gestion des données.