vue.js
Vuex

vuexをまだ理解していない全人類に捧ぐvuexを利用したコードの図解

Vuexについて、とりあえず必要ないしなんだか分かりづらいからと使わないでいたのですが、

この度いざ使ってみたところ、最初こそ引っかかるもののの、結構すんなりはいってきました。

ただ、この「最初こそ引っかかる」部分ができる人にとっては些細すぎるし、

引っかかって躓いてしまう人にとっては大変な部分だと思うので、

コードのどことどこに関連があるのか図解してみようと思います。

まずは、よくVuexの説明ででてくるこのイラストを見てほしいのですが、

私は一度にたくさんの要素が出てきすぎてしまって、一旦理解するのを後回しにしていました。

vuex.png

しかし、順を追っていけばそんなに難しくなさそうなので、この記事を書いてみました。

実際にシンプルなカウンタを作ってみたので、このコードを図解してみましょう。

スクリーンショット 2019-03-06 00.20.26.png


サンプルコード

コンポーネントとストアのサンプルコードは下記になります。


app.vue

<template>

<div id="app">
<p>counter: {{ counter }}</p>
<button @click="incrementCount()">+1</button>
<button @click="incrementCount(5)">+5</button>
</div>
</template>

<script>
import { mapState } from "vuex"

export default {
name: "app",
computed: {
// state から
...mapState(['counter'])
},
methods: {
incrementCount(n = 1) {
// Actionsへ
this.$store.dispatch("incActionCounter", { inc: n });
}
}
};
</script>



store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
state: {
counter : 0
},
mutations: {
incrementMutateCounter(state, payload){
// stateへ
state.counter += payload.inc
}
},
actions: {
incActionCounter(store, payload){
// Mutationsへ
store.commit('incrementMutateCounter', payload)
}
}
})



図解する


stateを参照する

スクリーンショット_2019-03-06_01_05_11_mapState.png

1.ストアの中にstateを用意してコンポーネントでcomputedで参照する


Actionsをdispatchする

スクリーンショット_2019-03-06_01_05_11 dispatch.png

2.methodsの中なりライフサイクルの中なりから、 Actionsdispatch する


Mutationsへcommitする

スクリーンショット_2019-03-06_01_05_11commit.png

3. Actionsの中から MutationsCommit する


stateを更新する

スクリーンショット_2019-03-06_01_05_11.png

4. Mutationの中からstateに新しい値を入れる

この4つで1サイクルが基本です。

どうでしょう、コードに矢印を引っ張って追っていくとそんなに難しくないような気がしませんか?

簡単にですが、理解の一助となればと思います。


まとめ的な

スクリーンショット_2019-03-06_00_23_17.png

横に並べたら画像サイズがつらたんです……


なんでActionsとMutationsは別れているの?

余談ですが、ActionsとMutationsが別れているのは、ひとえに責務の分離のためです。

あまりうまく表現できないのですが、methodsに書きたいロジックの中から共通化できそうな部分はActionsに移していくのがスマートな気配を感じます。

一方、Mutationsは、Actionsからpayloadを受け取って、必ず一定の加工を行ってstateに格納する用途で使うのが良さそうです。

ActionsやMutationsは受け取った値をそのまま次のプロセスへ渡すこともあり、その場合ただセッターが生えているような短いコードになりますが、これについてはそういうものとして割り切りましょう。

なお、stateに対して書き込みを行えるのはMutationsからのみとなります。