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

Vuexについて、とりあえず必要ないしなんだか分かりづらいからと使わないでいたのですが、
この度いざ使ってみたところ、最初こそ引っかかるもののの、結構すんなりはいってきました。

ただ、この「最初こそ引っかかる」部分ができる人にとっては些細すぎるし、
引っかかって躓いてしまう人にとっては大変な部分だと思うので、
コードのどことどこに関連があるのか図解してみようと思います。


まずは、よくVuexの説明ででてくるこのイラストを見てほしいのですが、
私は一度にたくさんの要素が出てきすぎてしまって、一旦理解するのを後回しにしていました。

![vuex.png](https://qiita-image-store.s3.amazonaws.com/0/122390/1896beab-aaaa-670a-7289-ecaf2e3f91a5.png)


しかし、順を追っていけばそんなに難しくなさそうなので、この記事を書いてみました。
実際にシンプルなカウンタを作ってみたので、このコードを図解してみましょう。
![スクリーンショット 2019-03-06 00.20.26.png](https://qiita-image-store.s3.amazonaws.com/0/122390/564ae383-3b6e-3a37-b8fa-b9e088a1c754.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](https://qiita-image-store.s3.amazonaws.com/0/122390/70c3e824-6f79-31d5-2e60-86e2a5da4405.png)
１.ストアの中にstateを用意してコンポーネントでcomputedで参照する

## Actionsをdispatchする
![スクリーンショット_2019-03-06_01_05_11 dispatch.png](https://qiita-image-store.s3.amazonaws.com/0/122390/d5a7397e-4bcf-c116-3d04-a92b5d4ad126.png)
2.methodsの中なりライフサイクルの中なりから、 **Actions** を **dispatch** する

## Mutationsへcommitする
![スクリーンショット_2019-03-06_01_05_11commit.png](https://qiita-image-store.s3.amazonaws.com/0/122390/229f8751-a597-5206-7c9a-7e8f89f88ba6.png)
3. Actionsの中から **Mutations** へ **Commit** する

## stateを更新する
![スクリーンショット_2019-03-06_01_05_11.png](https://qiita-image-store.s3.amazonaws.com/0/122390/37ec1cc9-63e1-577c-7084-ac003c5ae4f9.png)
4. Mutationの中からstateに新しい値を入れる

この4つで1サイクルが基本です。
どうでしょう、コードに矢印を引っ張って追っていくとそんなに難しくないような気がしませんか？
簡単にですが、理解の一助となればと思います。

### まとめ的な
![スクリーンショット_2019-03-06_00_23_17.png](https://qiita-image-store.s3.amazonaws.com/0/122390/eefd6466-92ef-4234-602a-168db8f3a881.png)

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


## なんでActionsとMutationsは別れているの？
余談ですが、ActionsとMutationsが別れているのは、ひとえに責務の分離のためです。
methodsに書きたいロジックの中から共通化できそうな部分はActionsやmutationに移していくのがスマートな気配を感じます。

まず、API通信などの非同期処理は必ずActionsでやりましょう。

一方、Mutationsは、Actionsからpayloadを受け取って、そのままstateに格納する場合や、
一定の加工を行ってstateに格納するのにMutationsを使うのがよさそうです。

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


### こんな記事も書いてます
- [今からVue\.jsを始める人のための「知るのを後回しにしてよい」n個のこと \- Qiita](https://qiita.com/fruitriin/items/3249bb24d60932bb42ee)
- [初めてVue\.jsに触れた頃の私へ今の私が伝えたいTips コンポーネント分割/ライブラリ選択編 \- Qiita](https://qiita.com/fruitriin/items/16b4542467e15ba82078)
- [初めてVue\.jsに触れた頃の私へ今の私が伝えたいTips プロジェクト作成編 \- Qiita](https://qiita.com/fruitriin/items/dcb8fdad117591c0f402)
- [私がハマったVue\.jsのショボいミス \- Qiita](https://qiita.com/fruitriin/items/fe26e3ecb33000a6544e)
- [LaravelからVue\.jsを使う最短レシピ \- Qiita](https://qiita.com/fruitriin/items/e0f2c9aa035c3ff2c874)