【Nuxt.js/Vue.js】Vuexのstateを初期化する方法について

2021/4/12 JavaScript, プログラミング

ここ最近久しぶりにNuxt.jsを使った仕事をしているのですが、その中で「stateを初期化する」実装をする必要がありました。

色々調べてみて発見、まとめた結果、無事に実装できたので、ひとまずブログに記してみたいと思います　

いきなり結論・【Nuxt.js/Vue.js】Vuexのstateを初期化する実装例

ということでいきなり結論として、【Nuxt.js/Vue.js】Vuexのstateを初期化する実装例を記載してみたいと思います。

const getDefaultState = () => {
  return {
    name: 'kosuge',
    age: '30',
    from: 'saitama',
  }
}

export const mutations = {
  resetState(state) {
    Object.assign(state, getDefaultState())
  },
}
export const state = () => getDefaultState()

/* getter 以下は今回の本題に関係ないので省略　*/

といった感じです。

上記はNuxt.jsを使用した場合で、storeディレクトリ内に用意したjsファイルに記載したものです。storeをモジュールで分けていても分けていなくても、基本的には同じです！

ポイントとしてはstateの中身を直接設定するのではなく、別途メソッドを用意して、返り値としてstateを設定しているという点です。

さらに、mutations内にstate初期化用のメソッドを用意して初期化したい時はcommitして初期化用のメソッドを実行するという流れになります。

海外の文献を色々参考にしましたが、上記記事のままやるとwarningが出ました。

WARN ‘state’ should be a method that returns an object in store/index.jsみたいなエラーが出るので、stateの部分をメソッドとして定義することがポイントになります。

僕の場合、Vueコンポーネント側からbeforeDestroy()などに引っ掛けて実行させるようにしました。