Help us understand the problem. What is going on with this article?

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やmutationに移していくのがスマートな気配を感じます。

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

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

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

こんな記事も書いてます

studist
「伝えることを、もっと簡単に」をミッションにビジュアルSOPマネジメントプラットフォームのBtoB SaaS「Teachme Biz」を開発・運営するスタートアップ
https://medium.com/studist-dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした