[nuxt/vue] nuxt store Classic mode deprecated 해결 방법

Nuxt store classic mode deprecated 해결방법

 

🐣 들어가기 전

어느 날 Nuxt로 만든 프로젝트에서 run server를 돌릴 때마다 이상한 경고문이 발생하기 시작했다.

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

 

흠 무슨에러지?

 

 

무슨 에러이길래 이렇게 무섭게 여러 번 찍히는 것인가

에러가 찍히긴 하지만 프로젝트 상 기능에서는 특별히 큰 문제가 없어서 일단은 무시하고 있었으나,

지속적으로 콘솔 로그에 뜨다 보니 슬슬 신경이 쓰여 이번 기회에 알아보기로 했다.

Classic mode for store/ is deprecated and will be removed in Nuxt3

 

 

 

💡 Store에서의 Classic Mode과 Module Mode

Nuxt에서 store 기능을 활용하기 위해서는 /store 디렉터리 아래에 파일을 생성해야 한다.

해당 디렉터리 이름을 절대적이며 변경을 해서는 안되기 때문에

vuex를 이용하기 위해서는 /store 디렉터리 아래에 파일이 생성되어야 한다.

 

store 디렉터리 하위에 파일을 작성하는 방식은 두 가지가 있는데

그 방식이 Classic Mode와 Module Mode인 것이다.

• Class Mode :  store 디렉터리 내 index.js에서 vuex를 important 한 후 new Vuex.store()로 store 객체를 만드는 방법

• Module Mode:  store 디렉터리 하위. js 파일에서 별도의 vuex important 대신  export 구문을 이용하여 state, mutations, action, gatter 등을 작성하여 네임스페이스 자체를 모듈로서 이용되는 방법

즉, 위의 에러는 더 이상 store하위 폴더에 index.js에서 import vuex 구문을 사용하지 말고

모듈 형태로 바꾸라는 에러였다. 

 

기존 코드

현재 코드의 경우 new Vuex.store() 안에서 코드를 작성했다.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default () => new Vuex.Store({

  state: () => ({
   ...
  }),

  mutations: {
  ...
  },
  getters: {
  ...
  },
  actions: {
  ...
  },
})

 

수정 코드

위의 코드를 Module Mode 방식으로 아래와 같이 변경하면 더 이상 프로젝트 실행 시 위의 에러가 나타나지 않는다!

export const state = () => ({
	...
});

export const mutations = {
    ...
};
export const getters = {
    ...
}
export const actions = {
    ...
};

 

 

 

 

---

Reference

vuex.vuejs.org/guide/strict.html#strict-mode

vuex.vuejs.org/guide/modules.html

jeremywynn.com/blog/going-from-vuex-classic-store-to-modules-in-nuxt/