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>