【Vuex】基本的な使い方

Vuexで状態管理を行う。

インストール

% yarn add vuex

Vuexを設定

Vuexの内容 - state: $storeで参照できるグローバル変数のようなもの - getters: storeの算出プロパティのようなもの - mutations: stateの値を変更する関数 - actions: mutationsの処理を非同期的に行う

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);　// useはプラグインを使う宣言
 
// Vuexの中身をvue.jsに適用させる
export default new Vuex({　
    state: {　 
        count: 2
    },
    getters: {　
        doubleCount: state => state.count * 2
        // 唯一のstatementがreturnである時アロー関数を使えば省略できる
    },
    mutations: {　// この中でのみstateの値を変えられる
        increment(state, number) {
            state.count += number
        }
    },
    actions: {　
        sync(context, number) {
            context.commit('increment', number);
        },
        async(context) {
            setTimeout(() => {...}, 1000);
        }
    }
});

VuexをVueに適用させる

import store from './store.js';
 
new Vue ({
    store: store,　// 全てのコンポーネントで$storeが使えるようになる
    router: router,
    render: h=>h(App)
}).$mount('#App');

ストアしたデータをコンポーネントから参照する

computed: {
    count() {
        return this.$store.state.count;  // stateを参照
    },
    doubleCount() {
        return this.$store.getters.doubleCount;  // gettersを参照
    },

コンポーネントからデータをストアする

methods: {
    increment() {
        this.$store.commit('increment', 2);
        // 第一引数にmutationsの関数　第二引数にストアするデータ
    },
    sync() {
        this.$store.dispatch('sync', 2);
        // コンポーネントからはcommitはしない(全てactionsを通す)というのもアリ
        // 一つでも非同期処理があったら全部dispatchにしちゃうとか
    }
}

Vuexにおける全体的なデータの流れ

Components
↓　this.$store.dispatch();　　直でcommitでもいい
Actions
↓　commit();
Mutations
↓　stateの値を変更
State
↓　stateの値を取得
Getters