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>
