Vuex est une technologie simple et pratique, facile à prendre en main. Cet article explore son utilisation avancée, notamment la modularisation avec modules et l'emploi des fonctions d'assistance mapState et mapActions.

I. Modularisation avec modules

Pour structurer votre store Vuex, vous pouvez diviser votre état en modules indépendants.

1. Structure du répertoire

Créez un dossier store à la racine de votre projet. À l'intérieur de ce dosseir, créez un fichier index.js et un sous-dossier nommé modules.

store/
├── index.js
└── modules/

2. Configuration du store principal (store/index.js)

Ce fichier initialise le store Vuex et importe les modules définis.

import Vue from 'vue'
import Vuex from 'vuex'
import rootModules from './modules' // Importe l'index des modules

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // État global si nécessaire
  },
  mutations: {
    // Mutations globales si nécessaire
  },
  actions: {
    // Actions globales si nécessaire
  },
  modules: rootModules // Intègre tous les modules
})

3. Organisation des modules (store/modules/index.js)

Créez un fichier index.js dans le dossier store/modules/ pour centraliser l'miportation et l'exportation de vos modules spécifiques (par exemple, cart et login).

store/modules/
├── index.js
├── cart.js
└── login.js

store/modules/index.js :

// store/modules/index.js
import auth from './login';
import shopCart from './cart';

export default {
  auth,
  shopCart
}

4. Définition d'un module spécifique (exemple : store/modules/cart.js)

Chaque module peut avoir son propre état, ses mutations et ses actions.

// store/modules/cart.js
const state = {
  cartItems: 'mon-panier-local'
}

const actions = {
  updateCart({ commit }, payload) {
    commit('SET_CART', payload)
  }
}

const mutations = {
  SET_CART(state, data) {
    state.cartItems = data
  }
}

export default {
  namespaced: true, // Recommandé pour éviter les conflits de noms
  state,
  actions,
  mutations
}

5. Utilisation des modules dans le composant

Les foncitons d'assistance mapState et mapActions simplifient l'accès à l'état et aux actions des modules depuis vos composants Vue.

mapState doit être utilisé dans les computed pour garantir la réactivité. mapActions, quant à lui, se place dans les methods.

<script>
import { mapState, mapActions } from 'vuex'

export default {
  mounted() {
    // Appel d'une action du module 'auth'
    this.performLogin("utilisateur_connecte");
  },
  methods: {
    // Utilisation de mapActions pour l'action 'updateCart' du module 'shopCart'
    // Le premier argument est un alias, le second est le nom de l'action dans le module
    ...mapActions('shopCart', {
      modifyCart: 'updateCart' // Alias 'modifyCart' pour l'action 'updateCart' du module 'shopCart'
    }),
    // Appel de l'action 'performLogin' du module 'auth'
    ...mapActions('auth', ['performLogin']) // 'performLogin' est l'action dans le module 'auth'
  },
  computed: {
    // Utilisation de mapState pour accéder à 'cartItems' du module 'shopCart'
    // Le premier argument est un alias, le second est le chemin vers la propriété d'état
    ...mapState('shopCart', {
      cartStatus: state => state.cartItems // Alias 'cartStatus' pour 'cartItems' du module 'shopCart'
    }),
    // Utilisation de mapState pour accéder à 'userName' du module 'auth'
    ...mapState('auth', ['userName']) // 'userName' est la propriété d'état dans le module 'auth'
  }
}
</script>

Dans cet exemple, mapState et mapActions sont utilisés avec le nom du module comme premier argument pour cibler spécifiquement les propriétés et actions de ce module. Cela est particulièrement utile lorsque vous avez activé namespaced: true dans vos modules pour éviter les conflits de noms.