This content originally appeared on DEV Community and was authored by Eric Le Codeur
Si vous désirez plus de contenu francophone comme celui-ci, cliquer Follow ou suivez-moi sur Twitter
Vuex - State Managment
Le state management pour votre application Vue
La création de plusieurs components et plusieurs sous components entraine comme conséquence un partage des données et méthodes (via les Props et les Events) entre components qui devient vient très complex. Afin de simplifier cette gestion, Vue met à votre disposition la librairie Vuex.
Vuex permet de centraliser la gestion du state (des données et méthodes) de vos components en un seul endroit. Cet endroit est appelé le Store.
Le store permet de sauvegarder et de modifier votre state et cela à partir de n'importe quel component de votre application.
Du coup, le store est donc ce que l'on appel le 'single source of truth" de votre application.
L'historique de toutes les modifications faite au store est sauvegardé ce qui permet de faciliter grandement le débugging de votre application
Pour créer un store vous devez d'abord installer la librairie Vuex et initialiser l'object Vuex
vue add vuex@next
Emplacement de votre Store Vuex
Créer un dossier et fichier sour src/store/index.js
Ajouter le code de création du Store
import { createStore } from 'vuex'
const store = CreateStore({
state() {
return {
title: 'Hello World'
}
}
)
export default store
Une fois le Store créer, vous pouvez le lier à votre application en ajoutant ce code à src/main.js
import store from './store'
...
...
app.use(store)
app.mount('#app')
Une fois votre store lié à votre application vous pouvez utiliser la méthode spécial $store pour accéder à votre store de n'importe quel component
<template>
<h1>{{ $store.state.title }}</h1>
</template>
À noter que si la variable title de votre store change, tous les components ou sous component qui l'utilise seront automatiquement mis à jour.
Méthode computed
Pour accéder au store, il n'est pas considérer de bonne pratique d'utiliser directement ex. $store.state.title dans votre template.
La convention veut que vous utilisé une méthode computed
computed: {
title() {
return this.$store.state.title
}
}
// ou composition API
<script>
import { ref, computed } from 'vue'
import { useStore ] from 'vuex'
export default {
setup() {
const store = useStore()
return {
title: computed(() => store.state.title)
}
}
}
</script>
<template>
<h1>{{ title }}</h1>
</template>
mapStates
Si vous avez plusieurs variables state à créer, ça peut en effet prendre plus de temps pour écrire une computed pour chaque variable. C'est pourquoi Vue met à votre disposition une syntaxe raccourci
import { mapStates } from 'vuex'
computed: mapStates([
'title',
'count',
'user'
])
Modifier le State avec les Mutations
Une méthode de mutation permet de modifier votre state.
src/store/index.js
import { createStore } from 'vuex'
const store = CreateStore({
state() {
return {
title: 0
}
},
mutations: {
SET_TITLE(state, payload) {
state.title = payload
}
}
)
export default store
À noter que par convention les méthodes de mutations sont écrite en lettre majuscule ACTION_VARIABLE
Méthode commit()
Pour appeler la mutation à partir de votre component vous utilisez la méthode commit
mounted() {
this.$store.commit('SET_TITLE', 'My new Title')
}
Syntaxe raccourci si plusieurs déclaration
import { mapMutations } from 'vuex'
methods: {
...mapMutations([
'SET_TITLE',
'SET_COUNT',
'SET_USER'
])
},
mounted() {
this.SET_TITLE('My new Title')
}
À noter que par convention vous ne devez jamais avoir de méthode de mutation async
Actions
Les méthode qui utilisent le async vont être géré avec les Actions
Les Actions sont également utilisés quand vous désirez effectuer un traitement plus complex sur le state.
import { createStore } from 'vuex'
const store = CreateStore({
state() {
return {
title: 0
}
},
mutations: {
SET_TITLE(state, payload) {
state.title = payload
}
},
actions: {
resetTitle({ commit }, payload ) {
... code async possible ici ...
... ex. lire une api ...
commit('SET_TITLE', '')
}
}
)
export default store
Les méthodes actions peuvent avoir accès au paramètre context qui est en faite l'object $store. Il est donc possible de faire de la déconstruction. ex. { state, commit, mutations, etc. }
Méthode dispatch()
Pour appeler les actions à partir de vos component vous utilisez la méthode dispatch()
async mounted() {
await this.$store.dispatch('resetTitle')
}
À noter que le async/await est utiliser seulement si besoin async
Syntaxe raccourci si plusieurs déclaration
import { mapActions } from 'vuex'
methods: {
...mapActions([
'resetTitle',
'resetCount',
'resetUser'
])
},
mounted() {
this.resetTitle()
}
Exemple store.dispatch() et computed() avec 'script setup'
<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const products = computed(() => store.state.products)
store.dispatch('fetchProducts')
</script>
Conclusion
Merci d'avoir lu cet article. Si vous désirez plus de contenu francophone comme celui-ci, cliquer Follow ou suivez-moi sur Twitter
This content originally appeared on DEV Community and was authored by Eric Le Codeur
Eric Le Codeur | Sciencx (2021-08-02T22:33:53+00:00) Apprendre Vue.js 3 – Jour 3 : Vuex. Retrieved from https://www.scien.cx/2021/08/02/apprendre-vue-js-3-jour-3-vuex/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.