Vuexのきほんの「き」

Vuex（ビューエックス）。Vue.jsと共に使うライブラリです。
Webアプリケーションの状態を保持・更新する役割を担います。
例えば、hosonoという名前と33歳という年齢を保持するデータがあったとします。

{
    name: 'hosono',
    age: 33
}

このデータをVuexでは以下のように表現します。

const store = new Vuex.Store({
    state: {
        name: 'hosono',
        age: 33
    }
    .
    .
    .
}

このインスタンスをStore（格納）といいます。そして、格納されたデータをState（状態）といいます。

例えばある時、hosonoの年齢が34歳になりました。（年は取りたくない；）
Stateを書き換える場合、以下のようにします。

mutations: {
    increment(state) {
        state.age += 1
    }
}

これをMutation（変更）といいます。stateにあるageを+1します。
incrementという任意の名前をつけています。

ところで、Mutationはどうやって実行するのでしょうか。
Mutationを実行するには、以下のようにします。

actions: {
    incrementAction(context) {
        context.commit('increment')
    }
}

これをAction（実行）といいます。mutationsにあるincrementを実行します。
incrementActionという任意の名前をつけています。
actionsを実行するには以下のようにします。

store.dispatch('incrementAction')

これをDispatch（発送）といいます。actionsにあるincrementActionを実行します。

ところで、書き換えたstateをどのように取得するのでしょうか。
name: 'hosono', age: 34になっているはずですね！（嫌や！）
stateを取得するには、以下のようにします。

getters: {
    name: (state) => state.name,
    age: (state) => state.age
}

これをGetter（取得）といいます。stateにある値を取得します。
今回はnameとageをそれぞれ個別に取得しています。

ところで、上記の処理をVueのコンポーネントからどのように扱うのでしょうか。
コンポーネントから取り扱うには以下のようにします。

<template>
    <div>
        <h2>ユーザー</h2>
        <div>名前：{{ name }}</div>
        <div>年齢：{{ age }}</div>
        <button @click="incrementAge">年齢を足す</button>
    </div>
</template>
<script>
export default {
    computed: {
        name: this.$store.getters.name,
        age: this.$store.getters.age
    },
    methods: {
        incrementAge() {
            this.$store.dispatch('incrementAction')
        }
    }
}
</script>

ボタンを押すと、年齢が上がっていきます。
コンポーネントからstoreにアクセスするには以下のように書きます。

this.$store

computedでgettersを使い、stateのname、ageをそれぞれ取得しています。
また、methodsでボタンをクリックしたときに実行する処理を書いています。
actionsのincrementActionを実行するためにdispatchしています。

具体的な使用方法は以上となります。
最後に、Vuexを使用するにあたり、いくつかのルールがあります。

・基本的にコンポーネントからはActionとGetterのみを取り扱う
・コンポーネントから直接Mutationを実行したり、Stateの値を書き換えたりしない

これは、データの流れを一方向にするために設けられたルールです。
Action → Mutation → State → Getter
という流れです。

楽しんで、Webアプリケーションを設計してみましょう！
ではでは:D