Principes de base de Vuex

Vuex fournit un mécanisme centralisé pour gérer l'état dans les applications Vue.js. Il établit des directives claires pour maintneir la cohérence des données :

• Tout l'état de l'application doit résider dans un store unique.
• Les mutations représentent le seul moyen de modifier l'état, et elles doivent être synchrones.
• Les opérations asynchrones doivent être placées dans des actions.

En adhérant à ces règles, la structure du code reste adaptable. Les fichiers de store trop importants peuvent être scindés en fichiers distincts pour les actions, mutations et getters.

Organisation du code pour les projets étendus

Pour les applications complexes, il est recommandé de diviser le code Vuex en modules. Voici une architecture type :

├── index.html
├── main.js
├── api
│   └── ... # Isolation des appels API
├── composants
│   ├── App.vue
│   └── ...
└── magasin
    ├── index.js          # Consolidation des modules et export du store
    ├── selecteurs.js     # Définition des getters
    └── modules
        ├── panier.js     # Module de gestion du panier
        └── articles.js   # Module de gestion des articles

Mise en œuvre pratique

Configuration du store principal

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

Vue.use(Vuex)

// Import dynamique des modules Vuex
const contexteModules = require.context('./modules', true, /\.js$/)

const tousModules = contexteModules.keys().reduce((accumulateur, chemin) => {
  const nomModule = chemin.replace(/^\.\/(.*)\.\w+$/, '$1')
  const moduleCharge = contexteModules(chemin)
  accumulateur[nomModule] = moduleCharge.default
  return accumulateur
}, {})

const magasin = new Vuex.Store({
  modules: tousModules,
  selecteurs
})

export default magasin

Définition des getters

const selecteurs = {
    jetonAcces: etat => etat.articles.tous
}

export default selecteurs

Exemple de module de gestion des articles

import service from '../../api/service'

// État initial
const etat = {
  tous: []
}

// Getters (aucun dans cet exemple)
const selecteurs = {}

// Actions
const actions = {
  chargerArticles ({ commit }) {
    service.obtenirArticles(articles => {
      commit('modifierArticles', articles)
    })
  }
}

// Mutations
const mutations = {
  modifierArticles (etat, articles) {
    etat.tous = articles
  },
  reduireStock (etat, { identifiant }) {
    const article = etat.tous.find(a => a.identifiant === identifiant)
    if (article) {
      article.stock--
    }
  }
}

export default {
  espaceDeNom: true,
  etat,
  selecteurs,
  actions,
  mutations
}