見出し画像

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

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

私はビールが大好きです! もし、私の記事が気に入ってくれて、ビールをおごってくれる人がいましたら、ぜひサポートしてください。 お礼としまして、ビールを飲んでいる写真をツイッターに上げます!(感謝の証)

hosonoです。読んでくださってありがとうございます!
1
東京でフロントエンドエンジニアをしています。 JavaScriptでおいしいごはんとビールを頂いてます。🍚🍺
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。