Vuex /
Le state management avec vuex

20/11/2017

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>