Vuexでstoreをモジュール分けする

Vuexのstoreにモジュール分けする

参考:https://qiita.com/youstr/items/a3a484b6669e67928e42
モジュール分けする前は以下の様にしてidTokenを保存していました。

store/index.js

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

export default createStore({
    state: {
        idToken: null,
    },
    mutations: {
        SET_IDTOKEN(state, idToken) {
            state.idToken = idToken
        },
        LOGOUT(state) {
            state.idToken = null
        },
    },
    plugins: [
        createPersistedState({
            key: 'key',
            paths: ['idToken'],
            storage: window.sessionStorage,
        }),
    ],
})

現状だとidTokenしか保存していませんが、今後保存する値が増えると、たくさん書かなければならなくなるのでモジュール分けしたいと思います。

store/index.jsではauthモジュールを呼び出すだけにします。

store/index.js

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

// モジュールをインポート
import auth from './modules/auth'

export default createStore({
    modules: {
        auth,
    },
    plugins: [
        createPersistedState({
            key: 'key',
            paths: ['auth'],
            storage: window.localStorage,
        }),
    ],
})

store/modules/auth.jsでは認証情報の処理を書きます。

store/modules/auth.js

const state = {
    idToken: null,
    accessToken: null,
    refreshToken: null,
}

const mutations = {
    SET_TOKENS(state, tokens) {
        state.idToken = tokens.idToken
        state.accessToken = tokens.accessToken
        state.refreshToken = tokens.refreshToken
    },
    LOGOUT(state) {
        console.log('state', state)
        state.idToken = null
        state.accessToken = null
        state.refreshToken = null
    },
}

const actions = {
    setTokens({ commit }, tokens) {
        commit('SET_TOKENS', tokens)
    },
    logout({ commit }) {
        commit('LOGOUT')
    },
}

export default {
    namespaced: true,
    state,
    mutations,
    actions,
}

storeに保存した変数はstore.state.auth.idTokenの様にして呼び出せます。
変更前はstore.state.idTokenでしたが、モジュール分けすることでモジュール名をstore.state.{モジュール名}にする必要があります。