インストール方法の記事はこちら↓
getters
計算式など複雑な式を含む関数をコンポーネントで使いまわしたい時、gettersを使用すると効率的になる。
store.jsに計算式を作成。
gettersの中では、stateで定義したcountを100かけるという命令式を定義。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
name: 'Mory',
count: 0
},
getters: {
counter: state => state.count * 100
}
});
使用したいコンポーネントのcomputedで&store.getters.counterで関数を呼び出す。
<template>
<div>
<p>{{count}}</p>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.getters.counter;
}
}
};
</script>
mapGettersヘルパーを利用する
複数設けたgettersを効率的にするために、mapGettersを使用する。
関数を利用したいコンポーネント上でmapGettersをインポートする。
import{ mapGetters }from "vuex";
computedオブジェクトの中でmapGettersを呼び出し、配列で使用する関数を定義していく。
mapGettersは、
computed: mapGetters([“counter”, “doubleCounter”])
のように記載することもできるが、他のcomputedが使用できなくなるので、オブジェクトの中にスプレッド構文「…」を用いて関数の呼び出しを行う。
<script>
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["counter", "doubleCounter"])
}
};
</script>
【同期処理】mutationでstateの変更を集約させる
mutatioとは、グローバル変数をmutationの中だけで変更できるように制御する変数。
変更が起こる場所をひとつにまとめる事で、追跡や予測がしやすくなる。
mutationを使うには、store.jsでmutationsの中に関数を書き込む。
mutationには引数をとる。
第一引数 ＝＞ state
第二引数 ＝＞ 入れたい値
export default new Vuex.Store({
state: {
name: 'Mory',
count: 0
},
getters: {
counter: state => state.count * 100,
doubleCounter:state => state.count * 2
},
mutations:{
increment(state,number){
state.count += number;
},
decrement(state,number){
state.count -= number;
}
}
});
mutationを使う場合は、利用したいコンポーネントのmethodsで定義する。
this.$store.commit(‘[関数名]’,[入れたい値]);
&store.mutationではなく、commitを使うところに注意する。
<script>
export default {
methods: {
increment() {
this.$store.commit('increment',1);
},
decrement() {
this.$store.commit('decrement',1);
}
}
};
</script>
mapMutationsヘルパーを利用する
mutationもまとめて書くことができる。
mapMutationはmethodsに書き込む。
初期値の値（第２引数）は、テンプレート上に入れる。
※buttonタグの @click=”increment(1)”
<template>
<div>
<button @click="increment(1)">+</button>
<button @click="decrement(1)">-</button>
</div>
</template>
<script>
import{mapMutations} from "vuex";
export default {
methods: {
...mapMutations(["increment","decrement"])
}
};
</script>
mutationには、同期的な処理しか書くことができない。
【非同期処理】actionを使用する
mutationは同期処理だったが、actionは非同期処理が実行できる。
actionには引数を入れることができる。
第一引数 ＝＞ context
第二引数 ＝＞ いれたい値
export default new Vuex.Store({
state: {
name: 'Mory',
count: 0
},
getters: {
counter: state => state.count * 100,
doubleCounter:state => state.count * 2
},
mutations:{
increment(state,number){
state.count += number;
},
decrement(state,number){
state.count -= number;
}
},
actions:{
increment(context,number){
context.commit('increment',number);
},
}
});
使用するときは、コンポーネント上で
this.$store.dispatch(“[関数名]”, [いれたい値]);
として呼び出すことができる。
export default {
methods: {
increment() {
this.$store.dispatch("increment", 1);
}
}
};
</script>
mapActionsヘルパーを利用する
actionsも同じようにmapが用意されている。
値は、テンプレート上に引数を設けて入れる。
<script>
import { mapActions } from "vuex";
export default {
methods: {
...mapActions(["increment"])
}
};
</script>
