• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 19/04/2021

Créez un data store centralisé avec Vuex

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Vuex est un gestionnaire d'état et une bibliothèque pour les applications Vue.js. En d'autres termes, le but unique de Vuex est de nous aider à créer un store centralisé qui nous permettra d'avoir cette "source unique de vérité" pour récupérer nos datas.

Installez Vuex

Grâce à Vue CLI, il suffit d'exécuter la commande suivante dans notre terminal pour ajouter Vuex à notre projet :

vue add vuex

Une fois Vuex ajouté à votre application par Vue CLI, vous devriez voir un résultat similaire dans votre terminal :

output de l'installation de Vuex dans le terminal
Ce que vous devriez voir dans votre terminal

Cela signifie que Vuex est bien installé dans votre application. Tout ça en un clic, on s'en sort bien, non 😎 ? Maintenant, voyons voir quels changements ont été apportés à notre application.

src/main.js

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

 En regardant le fichier  main.js  de plus près, vous remarquerez que le plugin a introduit le  store  en tant que nouvelle configuration sur notre instance de Vue. De la même manière que nous configurerions une propriété  data  pour mettre en place un nouveau data store, vous pouvez considérer cette propriété  store  comme le data store global que nous allons configurer avec Vuex.

Jetons un œil au fichier dans lequel toute la magie Vuex a lieu :  src/store.js

Rencontrez store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})

 En parcourant  store/index.js, vous remarquerez une nouvelle ligne de code que nous n'avions pas encore rencontrée :

Vue.use(Vuex)

Cette syntaxe est utilisée pour le système de plugins Vue. Cette méthode permet d'ajouter une fonctionnalité globale à notre instance de Vue. Et comme notre but est d'ajouter un data store global dans notre application, le système de plugin est parfait pour ajouter Vuex à notre application.

Ensuite, comme pour la mise en place d'une nouvelle instance de Vue avec  new Vue(), Vuex est installé de la même manière avec  new Vuex.Store(). Et vous pouvez également lui passer des options de configuration, exactement comme pour une nouvelle instance de Vue.

Configurez Vuex

Comme nous le voyons dans  store/index.js, l'initialisation d'un nouveau store Vuex ne nécessite qu'une seule configuration. Cela se fait par un objet contenant trois clés : (1) state, (2) mutations et (3) actions. 

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})

Entraînez-vous

Vous trouverez le code source des exercices dans le repo GitHub du cours, dans le dossier  cafe-with-a-view. Pour commencer, consultez la branche  P4C2-Begin.

Instructions

  1. Ajoutez Vuex à l'application.

  2. Vérifiez que la boilerplate pour le store est bien présente dans un fichier comme  store/index.js.

En résumé

Dans ce chapitre, nous avons appris :

  • ce qu'est Vuex : une bibliothèque de gestion d'état permettant de créer un store centralisé qui deviendra la seule source de vérité de notre app ;

  • comment installer Vuex sur notre application ;

  • le fonctionnement de la structure de Vuex.

Maintenant que nous avons ajouté Vuex à notre projet avec succès, il est temps de découvrir son fonctionnement ! C'est parti dans le chapitre suivant ! 🚀

Exemple de certificat de réussite
Exemple de certificat de réussite