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

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の使い方は過去に記事にしているので、そちらも参考にしてください。

Webrandum

Nuxt.jsでVuexストア連携を行う方法｜Nuxt.jsの基本

https://webrandum.net/nuxt-vuex

Vue.jsでは、現在の状態を管理するためにサイト全体で使えるVuexという仕組みがあります。イメージとしてはグローバル変数のような存在で、全コンポーネントどこからでも参照・書き換えができます。Nuxt.jsではこのVuexがデフォルトでインストールされているのですぐに利用できるのと、使い方がVue.js単体のときと少し違ってきます。今回はそのVuexについてまとめておきます。Nuxt.jsの概要やセットアップに関しては過去に記事にしているので、そちらをご覧ください。Vuexの概要Vuexは先ほども説明した通り、サイトの状態を管理するた...