Apprendre Vue.js 3 - Jour 3 : Vuex

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

Comments

[Romuald R.]

Petite coquille import { useStore ] from 'vuex'