Vuex /
Le state management avec vuex

Bloc note très rapide sur l'utilisation de vuex, le state manager de vue.js

Dans un projet vue.js commencez par installer vueX

Installez vueX avec npm

npm install vuex --save

Créez un store

Créez un store dans votre application. J’ai décidé de créer un dossier store à la racine de mon projet.

Dans le fichier ./store/store.js


// ./store/store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); // Accesible with $store.state.count const state = { count: 3 }; export default new Vuex.Store({ state });

Demandez à vue.js d’utiliser le store

Dans main.js j’importe mon store à de manière globale puis je demande à vue.js de l’utiliser.


import Vue from 'vue' import App from './App' import store from './store/store' // j'importe mon store Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', store, // je demande de l'utiliser. template: '<App/>', components: { App } })

Les Getters

Nous pouvons créer des méthodes pour accéder à notre store. Pour ce faire nous créons nos méthodes :

const getters = {
   evenOrOdd : state => state.count % 2 === 0 ? 'even' : 'odd',
}

Maintenant nous avons une méthode pour interagir avec notre state. Mais comment y accéder depuis mon component ?

Il faut importer mapGetters dans notre component

Créer une méthode computed

NB Pour utiliser d’autres computed méthodes il faut utilise le spread operator.

computed :{

   ...mapGetters([
      'evenOrOdd'
    ]),
    hello: {
       get(){  return 42 },

    }
  }

Mon composant final avec les getters

<template>
  <div>
       Counter : {{$store.state.count}}, counter is {{ evenOrOdd }}
  </div>
</template>
<script>

import { mapGetters } from 'vuex'
import post from './post.vue';

export default {
  name: 'HelloWorld',
  components : {post},
  data(){
    return{
    }
  },
  computed :{

   ...mapGetters([
      'evenOrOdd'
    ]),
    hello: {
       get(){  return 42 },

    }
  }

}

</script>

Les setters

// ./store/store.js


const state = {
    count: 3
};


const mutations = {
     increment (state){
         state.count++
     },
     decrement (state){
         state.count--;
     }
}

const actions = {
    increment: (context) => context.commit('increment'),
    decrement: (context) => context.commit('decrement'),
    incrementIfOdd: (commit, state) => {
        if( (state.count + 1 ) % 2 === 0 ) commit('increment');
    },
    incrementAsync: ({commit}) => {
       return new Promise( (resolve, reject) => {
           setTimeout( () => {
                commit('increment');
                resolve();
           }, 1000); 
       })
    }
}

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});


Utilisez le store dans les composants


<template> <div class="hello"> Counter : {{$store.state.count}}, counter is {{ evenOrOdd }} <button @click="increment"> + </button> <button @click="decrement"> - </button> <button @click="incrementIfOdd"> + </button> <button @click="incrementAsync"> async </button> <post></post> <p> {{hello}} </p> </div> </template> <script> import { mapGetters, mapActions} from 'vuex' import post from './post.vue'; export default { name: 'HelloWorld', components : {post}, data(){ return{ } }, computed :{ ...mapGetters([ 'evenOrOdd' ]), hello: { get(){ return 42 }, } }, methods : mapActions([ 'increment', 'decrement', 'incrementIfOdd', 'incrementAsync' ]), } </script>