Vuexの全stateを一括初期化する方法

開発現場にて、ログアウト時に全stateを初期化するように実装したかったので、当時の調査・実装の備忘録。

このissueに幾つかの方法が議論されていたので参考にした。
https://github.com/vuejs/vuex/issues/1118

方法１

各モジュールごとに、stateを初期化するmutationを実装する。

sample.js

function initialState () {
  return {
    /* state */ 
  }
}


export default {
  // 初期値
  state: initialState(),
  
  mutations: {
    // 初期化処理
    reset (state) {
       Object.assign(state, initialState())
      }
    }
  }
}

当時は正攻法のようだったが、個別に書くことなど、諸々面倒に感じたので一旦スキップ

方法２

ログアウト時にリロードする処理をしこむ
➡︎煩わしい処理は何も考えずに済んで、実装も１行追加だけで楽

上のissueのコメントでも、以下のように書かれていた

Amazing when one line of code in my logout function takes care of all of this mess... this.$router.go(this.$router.currentRoute)

// 現在のパスでリロード
this.$router.go(this.$router.currentRoute.path)

参考：https://qiita.com/CeMoReOn/items/4ce640bee42bf1a0cbd7

方法3

vuex-extensionsを追加する
上のissueの中で、全stateリセットの共通処理のPRとしてマージされていた方法
➡︎今回はこれを採用

this.$store.reset()