Apprendre Vue.js 3 - Jour 3 : Vuex
Tags: french, javascript, vue, beginners
Published: 2021-08-02 22:33:53

---
title: Apprendre Vue.js 3 - Jour 3 : Vuex
published: true
description: Voici un rappel des concepts de base avec Vuex
tags: french, javascript, vue, beginner
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivcjrlj7x6s1urzzex16.jpeg
series: VueJS
canonical_url: https://www.ericlecodeur.com/apprendre-vuejs-3-jour-3-vuex-sate-management
---
Si vous désirez plus de contenu francophone comme celui-ci, cliquer <strong>Follow<string> ou <a href="https://twitter.com/EricLeCodeur" class="twitter-follow-button">suivez-moi sur Twitter</a>
<hr>
# 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
```jsx
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

```jsx
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

```jsx
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

```jsx
<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

```jsx
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>
```

```jsx
<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

```jsx
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

```jsx
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

```jsx
mounted() {
  this.$store.commit('SET_TITLE', 'My new Title')
}
```

Syntaxe raccourci si plusieurs déclaration

```jsx
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.

```jsx
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()

```jsx
async mounted() {
  await this.$store.dispatch('resetTitle')
}
```

À noter que le async/await est utiliser seulement si besoin async

Syntaxe raccourci si plusieurs déclaration

```jsx
import { mapActions } from 'vuex'

methods: {
  ...mapActions([
    'resetTitle',
    'resetCount',
    'resetUser'
  ])
},
mounted() {
  this.resetTitle()
}

```

Exemple store.dispatch() et computed() avec 'script setup'

```jsx
<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 <strong>Follow<string> ou <a href="https://twitter.com/EricLeCodeur" class="twitter-follow-button">suivez-moi sur Twitter</a>