# Vuexの雰囲気を掴むためにやったこと

Tags: JavaScript vue

お疲れ様です、ナガです。

頭が悪すぎてVuexがわからなすぎたので少しでも理解するために最近やったことの備忘録です。

# 閲覧したページの順番

1. Vuex公式
   • 最初に読むときは流し読みして、しっかり覚えようとせず、state、getters、mutations、actionsという用語を覚える程度にしました。
2. vue.js＋Vuexチュートリアル|Qiita
   • 実際に触って作って、書き方を学びました
3. 改めて学び直すVuex
   • 実際にVuexに触れてみたあとで、state、getters、mutations、actionsの概要を振り返りました
   • dispatchの存在を知りました
4. 改めてVuex公式を読む
   • 改めて公式ドキュメントを読むと、1の段階では理解できなかった部分も理解できるようになり、理解が深まりました

なお、2と3は「あ〜、なんとなくわかったかも」と、なるまで繰り返しました。

# キーワード

# state

状態のことです。

Vueインスタンスの data 的なポジションだと思います。

Vuexの場合、1つのVuexインスタンスに全てデータを集約させます。

Vueインスタンスの computed から ...mapState(modules, stateArray) で参照できます。

# コードサンプル

const store = new Vuex.Store({
  state: {
    count: 0,
    message: 'Default Store Message'
  },
  // 中略
}

# getters

state の値をもとに算出した値を返す関数を登録します。

Vueインスタンスの computed 的なポジションだと思います。

viewに state の値を反映させたいときに使います。

第一引数に、state、第二引数に getters、第三引数に rootStateを受け取る事ができます。

# コードサンプル

const store = new Vuex.Store({
  // 中略
  getters: {
    getCountWithSuffix (state, getters, rootState) {
      return `${state.count} 回`
    },
    getMessage (state, getters, rootState) {
      return state.message
    }
  },
  // 中略
}

# mutations

state のデータを更新する関数を登録します。

要するに mutations内に登録した関数でstateに登録したデータの値を増やしたり減らしたり文字列を変更したりします。

しかし、実際にデータを更新するには後述するactionsに登録した関数で commitする必要があります。

Vueインスタンスの methods 的なポジションかと思います。

changeMessage に第二引数を渡していますが、これに関しては後述の dispatch で説明します。

# コードサンプル

const store = new Vuex.Store({
  // 中略
  mutations: {
    increment (state) {
      state.count++
    },
    changeMessage (state, payload) {
      state.message = payload.message
    }
  },
  // 中略
}

# actions

mutations にデータを commit する関数を登録します。

引数に context 受け取って、context.commit, context.state, context.rootState にアクセスできます。

changeMessageAction に第二引数を渡していますが、これに関しては後述の dispatch で説明します。

# コードサンプル

const store = new Vuex.Store({
  // 中略
  actions: {
    incrementAction(context) {
      context.commit('increment')
    },
    changeMessageAction (context, payload) {
      context.commit('changeMessage', payload)
    }
  },
  // 中略
}

# dispatch

Vueインスタンス側（各モジュール）の methodsに登録した関数から、 dispatch 関数を発火させて commit させることも可能です。

vue インスタンス側では methodsに登録した関数に引数を渡すことができます。

渡した引数を dispatch 関数の引数にオブジェクト形式で typeと、追加したい引数を渡します。

この追加の引数は、特定の mutations に対する payload と呼びます。

payload で値を渡すと、 store の actions が受け取って、mutations へ渡して state が更新され、viewに反映されます。

# コードサンプル

const vm = new Vue({
  // 中略
  computed: {
    showCount() {
      return this.$store.getters.getCountWithSuffix
    }
  },
  methods: {
    increment () {
      this.$store.dispatch('incrementAction')
    },
    changeMessage (message) {
      this.$store.dispatch({
        type: 'changeMessageAction', // store の actions に登録した関数
        message // キーとバリューが同じ名前の場合 message とだけ書いてもよい
      })
    }
  }
  // 中略
})

store側では、 mutations内の関数で state と payload を受け取れるようにしておきます。

acitions 内の関数の引数に、commitしたい mutations と、Vueインスタンスの dispatch 関数から受け取った payload を渡します。

payload はオブジェクト形式にしておくことによって、複数のフィールドを含められるようになるので便利です。

# コードサンプル

const store = new Vuex.Store({
  // 中略
  mutations: {
    changeMessage (state, payload) {
      state.message = payload.message
    }
  },
  actions: {
    changeMessageAction (context, payload) {
      context.commit('changeMessage', payload)
    }
  },
  // 中略
})

# まとめ

定番ですが基本的なVuexの機能を使って、単純なカウンターアプリを作成しました。

https://jsfiddle.net/nagasawaaaa/3mzgjck0/1/

ナガの理解が間違っている雰囲気であればTwitterのDMでマシュマロ投げてもらえると嬉しいです。