vuex-persistedstateで永続化したstateデータを初期化する方法

2021年6月12日Vue.js

vuex-persistedstateで永続化したstateデータを初期化する方法を紹介します。

vuex-persistedstateで永続化したstateデータを初期化する方法

src/store/index.jsにすべての情報を保持しているとします。

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
state: {
playlists: [],
videos: [],
user: null,
search: null,
...
},
mutations: {},
actions: {},
getters: {},
plugins: [createPersistedState(
    { // ストレージのキーを指定
      key: 'appName',
      // ストレージの種類を指定
      storage: window.sessionStorage
    }
)]
})

上のような状態の場合、下のようにstateの情報をいったん変数で格納します。

stateの初期データを変数に格納する

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)
const getDefaultState = () => {
  return {
    playlists: [],
    videos: [],
    user: null,
    search: null,
	...
  }
}

export default new Vuex.Store({
state: getDefaultState(),
mutations: {},
actions: {},
getters: {},
plugins: [createPersistedState(
    { // ストレージのキーを指定
      key: 'appName',
      // ストレージの種類を指定
      storage: window.sessionStorage
    }
)]
})

そして、stateには、その変数を格納します。

mutationsを設定する

  mutations: {
    reset(state) {

      Object.assign(state, getDefaultState())
    },

mutationsで、resetやinitなどの名前をつけてObject.assign()でリセットすることができます。
Object.assignについては、JavaScriptにおけるプリミティブ型とオブジェクト型の挙動の差を参考にしてみてください。

呼び出す

  methods: {
    logout() {

      this.$store.commit('reset')
      projectAuth.signOut()
      .then(() => {
        this.$router.push({ name: 'Form' })
      })
      .catch(err => console.log(err.message))
      
    }
  }

呼び出し元のファイルでは、this.$store.commitでアクセスします。