Créez une application web avec Vue.js

Maintenant que nous avons installé Vuex dans notre application, il est temps pour nous de comprendre son fonctionnement. Et comme Vuex nous sert de store global, nous devrions commencer par apprendre dès maintenant comment stocker et récupérer les données qui s'y trouvent. Commençons tout de suite ! 🚀

Stockez des données dans Vuex

Dans Vuex, notre data store est défini en tant que  state  dans l'objet de configuration  store/index.js. Il s'agit d'un nouveau terme à apprendre, mais vous pouvez comparer cela à la propriété  data  que nous utilisons depuis le début.

Lorsqu'il s'agit de stocker des données dans Vuex, c'est aussi simple que d'ajouter des paires clé-valeur, comme vous le feriez dans tout autre objet JavaScript normal.

export default new Vuex.Store({
    state: {
        month: 8,
        day: 12,
        year: 2008
    }
}

Il peut paraître tentant de tout mettre dans le store global ; mais ce n'est pas ce qu'il faut faire, car une partie de ce qui rend l'architecture par composants aussi puissante est sa capacité à découper un certain nombre de sujets. L'idée est de remonter les données à un niveau global uniquement lorsque vous constaterez qu'il est nécessaire d'accéder aux données à partir de plusieurs composants.

Récupérez des données dans Vuex

Maintenant que nous savons comment définir les données dans Vuex, l'étape suivante consiste naturellement à déterminer comment accéder à nos données depuis nos composants. Il existe deux façons de faire.

Utilisez $store

Au fur et à mesure que vous allez approfondir des techniques plus avancées de Vue et que vous développerez vos connaissances, vous découvrirez des propriétés qui sont précédées du symbole dollar. En voici quelques exemples :

• this.$options  ;

• this.$parent  ;

• this.$children  ;

• etc.

Il s'agit de propriétés spécifiques à l'instance de Vue sur laquelle vous travaillez ; elles sont précédées du signe dollar afin de garantir que ces méthodes sont bien utilisées comme prévu.

Comme notre  store  Vuex est injecté à un niveau global à travers tous nos composants, cela signifie que nous avons accès à une propriété  $store  qui nous permettra d'accéder directement à Vuex dans sa totalité.

Si on reprend notre exemple situé plus haut, nous pourrions accéder à notre  state  via  $store  par ce qui suit :

<template>
    <p>La date stockée dans Vuex est le {{ $store.state.day }}-{{ $store.state.month }}-{{ $store.state.year }}.</p>
</template>

Cependant, notre template commence à être un peu encombré. Il serait pratique d'avoir un moyen plus simple de faire référence au store, n'est-ce pas ? Eh bien, heureusement pour nous, il y a :  mapState  !

Utilisez mapState

Vuex nous fournit un moyen d'associer le state à des variables que nous pouvons appeler dans nos composants, évitant ainsi de devoir appeler  $store  à chaque fois :  mapState. Cette méthode nous permet de demander à Vuex les propriétés de state de notre choix, et il les ajoutera à nos propriétés calculées.

export default new Vuex.Store({
    state: {
        month: 8,
        day: 12,
        year: 2008
    }
}

<template>
    <p>La date stockée dans Vuex est le {{ day }}-{{ month }}-{{ year }}.</p>
</template>

<script>
import { mapState } from 'vuex'

export default {
    computed: {
        ...mapState(['year', 'month', 'day'])
    }
}
</script>

En cas de conflit sur les noms, vous aurez peut-être besoin de donner un nom différent à vos variables du state Vuex dans votre composant, ce qui est facilement réalisable en switchant l'argument depuis un tableau vers un objet, comme ici :

<template>
     <p>La date stockée dans Vuex est le {{ day }}-{{ uniqueMonth }}-{{ customYear }}.</p>
</template>

<script>
import { mapState } from 'vuex'

export default {
    computed: {
        ...mapState({
            customYear: 'year',
            uniqueMonth: 'month',
            day: 'day'
        })
    }
}
</script>

Dans cet objet, la clé représente le nouveau nom que vous voulez utiliser pour référencer votre valeur, tandis que la valeur correspond à la propriété de state que Vuex doit référencer.

Ceci étant dit, vous remarquerez probablement que nous sommes en train d'assembler notre date manuellement. Si cette date était référencée à plusieurs endroits dans l'application, cela serait très difficile à maintenir. Si seulement il existait un moyen de définir des propriétés calculées dans un store Vuex...

Découvrez les getters

Lorsque  store.js  est généré à la base, il laisse de côté une des propriétés qui est très utile dans de nombreux scénarios : les « getters », ou accesseurs. Les accesseurs peuvent être vus comme l'équivalent de la propriété calculée (computed) dans Vue.

Cette comparaison montre la manière dont les accesseurs dans un store Vuex correspondent théoriquement à la propriété calculée dans un objet de configuration Vue standard.

Ainsi, dans notre exemple de date, voilà la manière avec laquelle nous définirions notre date formatée :

export default new Vuex.Store({
    state: {
        month: 7,
        day: 23,
        year: 2010
    },
    getters: {
        formattedDate: state => {
            return `${state.day}-${state.month}-${state.year}`
        }
    }
}

 Comme vous pouvez le voir dans l'exemple, chaque accesseur est une fonction qui reçoit le state comme argument et retourne une valeur à laquelle nous pourrons accéder plus tard.

Ensuite, nous pouvons simplifier notre code encore davantage dans le composant, grâce à  mapGetters, qui fonctionne comme  mapState.

<template>
    <p>La date stockée dans Vuex est le {{ formattedDate }}.</p>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    computed: {
        ...mapGetters(['formattedDate'])
    }
}
</script>

Et tout comme  mapState,  mapGetters  peut également prendre un objet qui vous permet de définir des noms personnalisés pour les accesseurs que vous référencez.

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  P4C3-Begin.

Instructions

1. Migrez les données du  shoppingCart  vers Vuex.

2. Migrez les données relatives à  restaurantName  vers Vuex.

3. Migrez les données de  simpleMenu vers Vuex.

4. Migrez  copyright  vers les accesseurs (getters).

En résumé

Dans ce chapitre, vous avez appris à :

• définir le data store dans Vuex avec state ;

• récupérer des propriétés depuis Vuex dans vos composants avec  $store  ;

• définir des propriétés calculées à l'aide d'accesseurs dans Vuex ;

• récupérer le state depuis Vuex avec mapState ;

• récupérer des accesseurs depuis Vuex avec mapGetters.

Dans le chapitre suivant, nous verrons comment mettre à jour et modifier notre store dans Vuex avec les mutations et les actions. Alors, rendez-vous au chapitre suivant !