FrontEnd/Vue.js

[nuxt/vue] nuxt store Classic mode deprecated ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•

๊น€ํ‰๋ฒ”๋‹˜ 2021. 2. 21. 22:08
๋ฐ˜์‘ํ˜•

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/

๋ฐ˜์‘ํ˜•