Nuxt.jsで「Classic mode for store/ is deprecated and will be removed in Nuxt 3.」のエラーメッセージが表示される場合の対処法

2022年7月12日

Nuxt.jsのバージョン3.X以降だとVuexを使う場合に「クラシックモード」という使い方だと下記のエラーメッセージが表示されました。

Classic mode for store/ is deprecated and will be removed in Nuxt 3.

ネット上でVuexの記事を探すと、意外とクラシックモードで書かれてある記事が多いので、そのままコピペすると上記のエラーが表示されてしまいます。

今回はクラシックモードからモジュールモードに書き換える方法をまとめておきます。

Vuexのクラシックモードからモジュールモードへの書き換え

下記いずれかの場合に、モジュールモードを使っていると判定されます。

index.jsがstoreオブジェクトをexportしていない
index.jsがそもそも存在していない場合

index.jsを開いてみて、下記のように最後に「export default store」があるとクラシックモードです。

import Vuex from 'vuex'

const state = () => ({
  変数名: 初期値,
  変数名: 初期値
})

const getters = {
  // stateの状態を外部で取り出すときに使用する
  変数名: state => state.変数名
}

const mutations = {
  ミューテーション関数名(state, 引数){
    // ここでstate（ストアの状態）を変更する
    state.変数名 = 値
  }
}

const actions = {
  async アクション関数名({ commit }){
    // ここでミューテーションを呼び出し、外部とのAPI通信や非同期処理も行う
    commit('ミューテーション関数名', 引数)
  }
}

const store = () => new Store({
  state,
  getters,
  mutations,
  actions
})

export default store

これをモジュールモードに書き換えると下記のようになります。

export const state = () => ({
  変数名: 初期値,
  変数名: 初期値
})

export const getters = {
  // stateの状態を外部で取り出すときに使用する
  変数名: state => state.変数名
}

export const mutations = {
  ミューテーション関数名(state, 引数){
    // ここでstate（ストアの状態）を変更する
    state.変数名 = 値
  }
}

export const actions = {
  async アクション関数名({ commit }){
    // ここでミューテーションを呼び出し、外部とのAPI通信や非同期処理も行う
    commit('ミューテーション関数名', 引数)
  }
}

それぞれ個別にexportしています。
その他の細かいVuexの使い方は過去に記事にしているので、そちらも参考にしてください。