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

URL: https://webrandum.net/nuxt-vuex-classic-mode-for-store-is-deprecated/
公開日: 2022-07-12
更新日: 2022-07-12
カテゴリー: コーディング
タグ: Nuxt.js, Vue.js, Vuex
出典: Webrandum（著者: サイトウ マサカズ）

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の使い方は[過去に記事](https://webrandum.net/nuxt-vuex/)にしているので、そちらも参考にしてください。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2022/06/eyecatch-7.png)Nuxt.jsでVuexストア連携を行う方法｜Nuxt.jsの基本https://webrandum.net/nuxt-vuexVue.jsでは、現在の状態を管理するためにサイト全体で使えるVuexという仕組みがあります。イメージとしてはグローバル変数のような存在で、全コンポーネントどこからでも参照・書き換えができます。Nuxt.jsではこのVuexがデフォルトでインストールされているのですぐに利用できるのと、使い方がVue.js単体のときと少し違ってきます。今回はそのVuexについてまとめておきます。Nuxt.jsの概要やセットアップに関しては過去に記事にしているので、そちらをご覧ください。Vuexの概要Vuexは先ほども説明した通り、サイトの状態を管理するた...](https://webrandum.net/nuxt-vuex)