Gestion de l'état

Implémentation officielle semblable à Flux

Les grosses applications peuvent souvent augmenter en complexité du fait des multiples parties d’état disséminées à travers divers composants et les interactions entre eux. Pour résoudre ce problème, Vue offre vuex : notre propre bibliothèque de gestion d’état inpiré par Elm. Il est même intégré à vue-devtools, permettant le voyage dans le temps sans aucune configuration préalable.

Information pour les développeurs React

Si vous venez de React, vous pouvez vous demander comment Vuex se compare à Redux (l’implémentation de Flux la plus populaire dans cet écosystème). Redux est en fait agnostique de la couche vue, et peut donc être facilement utilisé avec Vue à l’aide de plusieurs liaisons simples. Vuex est différent dans le sens où il sait qu’il est dans une application Vue. Cela lui permet de mieux s’intégrer avec Vue, offrant une API plus intuitive et une meilleure expérience de développement.

Gestion d’état simple à partir de rien

On n’insiste souvent pas assez sur le fait que, dans des applications Vue, c’est l’objet data qui fait office de « source de vérité ». Une instance de Vue ne fait que proxifier l’accès à cet objet. Par conséquent, si vous avez une partie d’état qui doit être partagée par plusieurs instances, vous pouvez simplement la partager par référence :

const sourceOfTruth = {}
const vmA = new Vue({
data: sourceOfTruth
})
const vmB = new Vue({
data: sourceOfTruth
})

Maintenant, quelle que soit la manière dont sourceOfTruth sera mutée, les instances vmA et vmB mettront à jour leurs vues automatiquement. Les sous-composants à l’intérieur de chacune de ces instances y auront aussi accès via la propriété this.$root.$data. Maintenant, nous avons une unique source de vérité, mais le débogage serait un cauchemar. N’importe quel fragment de donnée pourrait être changé par n’importe quelle partie de notre application, à n’importe quel moment, et sans laisser de trace.

Pour nous aider à résoudre ce problème, nous pouvons adopter un simple modèle de stockage (« store ») :

var store = {
debug: true,
state: {
message: 'Bonjour !'
},
setMessageAction (newValue) {
if (this.debug) console.log('setMessageAction déclenchée avec', newValue)
this.state.message = newValue
},
clearMessageAction () {
if (this.debug) console.log('clearMessageAction déclenchée')
this.state.message = ''
}
}

Notez que toutes les actions qui changent l’état du store sont mises à l’intérieur du store lui-même. Ce type de gestion d’état centralisé permet de comprendre plus facilement quel type de mutations peuvent survenir et comment elles sont déclenchées. Maintenant, quand quelque-chose tourne mal, nous auront également un log sur ce qui a conduit à ce bogue.

De plus, chaque instance/composant peut gérer lui-même son propre état privé :

var vmA = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})
var vmB = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})

Gestion de l'état

Il est important de noter que vous ne devriez jamais remplacer l’objet d’état original dans vos actions. Les composants et le store ont besoin de partager une référence au même objet pour que les mutations puissent être observées.

Alors que nous continuons à développer la convention selon laquelle il n’est jamais permis à un composant de directement muter un état qui appartient au store, mais devrait à la place propager des évènements pour notifier le store qu’une action a été entreprise ; nous arriverons éventuellement à une architecture Flux. Le bénéfice de cette convention est que nous pouvons enregistrer toutes les mutations d’état survenant sur le store et implémenter des fonctions utilitaires avancées de débogage telles que des logs de mutations, des clichés instantanés, et du voyage dans le temps sur l’historique des actions.

Nous avons fait le tour de la présentation de vuex, aussi si vous êtes arrivé jusqu’ici, il est probablement temps de l’essayer !