自分用 Vuex アンチョコ

2017/11/22 10:50:56

まだマニュアルを読んだだけの段階なので不正確な部分があると思う。使っていって正確なところがわかった段階で都度アップデートする。

// mutations, actions の名前には他所から参照できる定数が好ましい
export const ADD_DATA = 'ADD_DATA'
export const REPLACE_DATA_LIST = 'REPLACE_DATA_LIST'
export const FETCH_DATA_LIST = 'FETCH_DATA_LIST'
new Vuex.Store({
    state: {
        dataList: [
            { id: 1, active: true },
            { id: 2, active: false },
        ]
    },
    // getters は state を参照するメソッド
    // mapGetters で Vue component の computed にマッピングできる
    getters: {
        // 第一引数には現行の state が入る
        activeData: state => state.dataList.filter(data => data.active),
        // 第二引数には他の getters を参照できるように getters への参照が入る
        activeDataLength: (state, getters) => getters.length,
        // 返り値を関数にすることにより、state を対象としたメソッドを公開できる
        findDataById: (state, getters) => id => state.dataList.filter(data => data.id === id),
        },
    },
    // mutations は state を変更する
    // mutations の名前には他所から参照できる定数が好ましい
    // mutations は同期的でなければならない (非同期処理には actions を使う)
    // mapMutations で Vue component の methods にマッピングできる
    mutations: {
        // 第二引数は payload と呼ばれ、object にすることが好ましい
        //
        //    store.commit(ADD_DATA, { data: { id: 3, active: true } })
        //
        [ADD_DATA] (state, { data }) {
            state.dataList.push(data)
        },
        [REPLACE_DATA_LIST] (state, { dataList }) {
            state.dataList = dataList
        },
    }
    actions: {
        // context は state や getters など store と同じ機能を持つがそのものではない
        //
        //     await store.dispatch(FETCH_DATA_LIST)
        //     console.log(store.state.dataList) // 最新の dataList が得られる
        //
        async [FETCH_DATA_LIST] (context) {
            const { dataList } = await api.fetchData()
            context.commit('REPLACE_DATA_LIST', dataList)
        }
    },
    modules: {
        // 以上の構成を名前空間を持った一段下がった位置に定義できる
        // ただし引数が以下のようになる
        //
        //     someGetter (state, getters, rootState, rootGetters)
        //     someAction ({ dispatch, commit, getters, rootGetters }) // context を展開している
        //
        // また root に commit および dispatch する場合は { root: true } が第三引数に必要になる
        //
        //     commit('someMutation', null, { root: true })
        //     dispatch('someOtherAction', null, { root: true })
        //
        // mapFoo などの展開は <a href="https://vuex.vuejs.org/ja/modules.html">https://vuex.vuejs.org/ja/modules.html</a> 参照
    },
    strict: debug,
    // plugins: debug ? [createLogger()] : []
  })