Docuemnt
Github

レイヤーである。ロジックをDOMから分離することによってテストがしやすくなる

Usage

• ルートコンポーネントにstoreオプションを設定する
  子コンポーネントでthis.$storeを利用することができるようになる
  子コンポーネントには自動で設定される

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
let store = new Vuex.Store({});
let app = new Vue({
    store,
}).$mount('#app');

state

stateはコンポーネントのcomputed内で下記の形式で利用することができる。

computed: {
    foo() {
        return this.$store.state.foo
    }
}

mapStateを使用すると以下のようにthis.$storeを省略することができる

computed: {
    ...mapState({
        // this.foo()
        foo: state => state.foo,
        foo_1(state) {
            return state.foo + 1;
        }
    })
}

Getter

getterはstateの値を取得するための関数

let store = new Vuex.Store({ 
    state: {
        items: [
            {id: 1, name: "foo"},
            {id: 2, name: "bar"},
        ]
    },
    getters: {
        // moduleではstate,getters,rootState,rootGettersを使用する
        foo : (state, getters) => {
            return state.items.filter(item => item.name == 'foo')[0]
        },
        // 関数を返すgetterを定義することで引数を渡すことができる
        getItemById: (state, getters) => (id) => {
            return state.items.filter(item => item.id == id)[0]
        }
    }
});

store.getters.foo
// {id: 1, name: "foo"}
store.getters.getItemById(2)
// {id: 1, name: "foo"}

• mapGettersはコンポーネント内のcomputedでthis.$state.gettersを省略することができる

computed: {
    ...mapGetters({
        // store.getters.foo => this.foo
        foo: 'foo',
        // store.getters.getItemById(2) => this.getItemById(2)
        getItemById: 'getItemById' 
    })
}

Mutation

• stateを変更する処理を記述する。その処理は同期処理でなければならない。 非同期処理はActionに記述する。

• store.commit(ミューテーション名, payload)で指定したミューテーションを呼び出す。

• リアクティブ性を保持するためにオブジェクトの属性を変更する際は下記のようにする

Vue.set(state.foo, 'foo', 1); 
state.foo = { ...state.foo, bar: 1 };

state: {
    foo: 1
},
mutations: {
    increment (state, payload) {
        state.foo += payload.foo;
    }
}

• mapMutationsを使用することでコンポーネントのmethodで省略して書くことができる

methods: {
    ...mapMutations({
        // this.$store.commit('foo', 1)をthis.foo(1)で利用することが可能になる。
        foo: 'foo',
    })
}

Action

• actionはmutationをcommitする

• actionは非同期的な処理を行うことができる

• actionはstore.dispatch(アクション名, payload)で実行する

• actionはPromiseを返すことによってthis.$store.dispatch('actionName').then(() => {...})のような書き方ができる

• { state, rootState, commit, dispatch, getters, rootGetters }はacitonの第1引数

actions: {
    foo ({ state, rootState, commit, dispatch, getters, rootGetters }, payload) {
        commit('foo', payload)
    }
}

methods: {
    ...mapActions({
        // this.$store.dispatch('foo', payload) => this.foo(payload)
        foo: 'foo'
    })
}

Module

• stateは関数にする

• デフォルトではstate以外はglobalに置かれる namespaced: trueにすればすべてlocalに置かれる

• getterの引数 state, getters, rootState, rootGetters

• actionの第1引数{dispatch, commit, getters, state, rootGetters, rootState}

• localからglobalに値をコミットする場合はcommitとdispatchの第3引数に{root: true}をセットする

Vuex.Store *

• Storeはアプリケーションで1つ

• storeに新しい属性を付与する時はリアクティブ性を持たせるためにVue.set()もしくは新しい値をセットする  

• store.stateにデータを保存する  

• mapStateはthis.$storeを省略することができる  

• computedの中で...mapStateする

• store.gettersはstateに関連するデータを取得する関数を登録する *

• mapGettersはcomputedにstore.gettersのキーをマッピングする際に利用する

• stateはmutationsにあるメソッドを通じて変更する this.$store.commit(mutationsのキー, 値)

• mutationsないでは同期処理を行う

• actionsはmutationsのコミットを行う
  this.$store.commit(mutationsのキー, 値)
  非同期的な処理を実行してもよい
  actionsの実行はstore.dispatch(アクション名, param)
  コンポーネント内ではthis.$store.dispatch(アクション名, param)
  actions内部はPromiseで囲む
  例外はcatch()で取得

• modulesはstoreの設定を分割して定義することができる
  states以外はデフォルトではglobalにおかれる
  states以外もnamespaceをおきたい場合はnamespaced: true
  名前空間を使用した場合以下のような形式にする
  this.$store.getters[‘foo/bar’]
  this.$store.getters[‘モジュール名/キー名’]
  this.$store.dispatch(‘モジュール名/キー名’, payload);
  store.registerModule()とstore.unregisterModule()で動的にモジュールを登録することができる。
  モジュールではstateはローカルステートとルートステートに分かれる

• routerをvuexで利用したい場合はvuex-router-syncを利用する

Vue.jsメモ
VueRouterメモ
cheatsheet
vuelidateメモ