Créez une application web avec Vue.js

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 :

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 ! 🚀