More than 3 years have passed since last update.

「これさえ読めば理解できる」Vuexの使い方

Posted at 2021-02-07

どんな人に読んでほしいか

SPAでアプリを作ってて、ログイン認証とか実装したいけど、Vuexの使い方がよくわからんぞ！って方に読んでいただきたいです。

難しい話をすっ飛ばすとVue複数のコンポーネント間使えるグローバル変数を用意するためのライブラリです。(めっちゃ誤解を招く)
一応公式では、「Vue.jsアプリケーションのための状態管理+ライブラリです」だそうです。

記事読んでて用語がわけわからなくなったらここに戻ってきてください。

ステート(State)... Vue.js全体で使えるグローバル変数
ゲッター(Getters)... どのコンポーネントでも使えるcomputedプロパティ的なやつ
ミューテーション(Mutations)... ストアの値を変更することを許された唯一の存在(語弊あり、本当はここから以外でも変更できます。でもこのルールに従って書いたほうが、可読性と保守性が上がります。)
アクション(Actions)...非同期処理を書く場所。ex.外部APIとの通信を行って、ミューテーションを呼び出す時。

Vue.jsで全体で使えるグローバル変数的なやつです。ここに登録したプロパティはVue.js全てのコンポーネントから以下の形でアクセスできます。
例

store.js

state: {
    count: 100
}

something.vue

 this$store.state.count   <!-- 100って出力される -->

ゲッターとは全てのコンポーネントから利用できる算出プロパティです。
算出プロパティってなんやねんって人はこちら
では実例を交えて解説していきます。
とあるコンポーネントに以下の算出プロパティを実装しているとします。

something.vue

computed: {
    countLessThanTwo() {
　　　　　　return this.$store.state.count < 2 

    }
}

上記の処理を他のコンポーネントでも利用したくなったとします。通常では他のコンポーネントでも上記の算出プロパティをコピペして実装しなければならないのですが、ゲッターズを使えば

store.js

getters: {
    countLessThanTwo:  state => state.count < 2
}

と登録をしておいて、他のプロパティで使い方時に

this$store.getters.countLessThanTwo

とするだけで全てのコンポーネントで利用できます。

ミューテーションとは、ステートの値を変更することができる唯一の存在。同期処理しかかけない！！！！！（これ大切）
※別にミューテーション外でも変更できるけど、ミューテーションのみから変更するのがベター。この方が可読性と保守性が上がるから。

store.js

mutations: {
    increment(state, number) {
         state.count += number
    }
}

第一引数にはstateを入れます。第２引数以降は好きな引数を入れます。
あとは使いたいコンポーネント側で、

something.vue

methods: {
    this.$store.commit("increment", 2);
}

のようにすれば利用できる！

アクションとは、非同期処理を書く場所。
以下のように使う

store.js

actions: {
    incrementAsync(context, number) {
          timeSetout({
          context.commit('increment', 2) 
          }, 1000)
     }
}

ちなみにアクションを実行するときは、

this.$store.dispatch('increment', 2)

のように実行する。