store/의 Vuex Classic 모드는 사용되지 않으며 Nuxt 3에서 제거됨

store/의 Vuex Classic 모드는 사용되지 않으며 Nuxt 3에서 제거됨

아래 파일이 있는데 "스토어에 대한 Classic mode/는 사용되지 않으며 Nuxt 3에서 제거될 것"이라고 경고하는 이유를 찾을 수 없었다.그 짜증나는 경고만 받으면 모든 게 잘 돼.

nuxt.js 저장소에 있는 module/data.js 파일.

    const state = () => ({
      loadedPosts: []
    });

    const mutations = {
      setPosts(state, posts){
        state.loadedPosts = posts;
      }
    };

    const actions = {
      setPosts(vuexContext, posts){
        vuexContext.commit('setPosts', posts);
      }
    };

    const getters = {
      loadedPosts(state){
        return state.loadedPosts;
      }
    };

    export default {
      state,
      actions,
      getters,
      mutations
    };

nux.js 저장소의 인덱스.js 파일.

import Vuex from 'vuex';
import data from "~/store/modules/data";

const createStore = () => {
  return new Vuex.Store({
    modules: {
      data: {
        namespaced: true,
        ...data
      }
    }
  });
};

export default createStore;

마침내, 많은 해답과 블로그를 읽고 해결책을 찾아냈다.

중요:- vue.js 앱에서 vuex 모듈에 대해 알고 있는 내용을 잊어버린 경우nuxt.js에서 Vuex를 사용하는 것은 조금 다르다.

솔루션:- Nuxt.js를 사용하면 모듈에 해당하는 모든 파일을 포함하는 저장소 디렉토리를 가질 수 있다.저장소에 필요한 파일을 직접 추가하고 저장소의 'modules' 디렉토리에 파일을 추가하지 마십시오.index.js 파일은 특별한 파일이며, 이것이 우리가 모듈과 관련이 없는 논리를 배치하는 부분이다.

store/data.js

export const state = () => ({
  loadedPosts: []
});

export const mutations = {
  setPosts(state, posts){
    state.loadedPosts = posts;
  }
};

export const actions = {
  setPosts(vuexContext, posts){
    vuexContext.commit('setPosts', posts);
  }
};

export const getters = {
  loadedPosts(state){
    return state.loadedPosts;
  }
};

프로젝트에서 상태 사용

this.$store.data.loadedPosts

프로젝트에서 돌연변이 사용

this.$store.commit('data/setPosts', [{id: '1',...}, {id: '2',...}]);

프로젝트에서 작업 사용

this.$store.dispatch('data/setPosts', [{id: '1',...}, {id: '2',...}]);

프로젝트에서 게터 사용

this.$store.getters['data/loadedPosts'];

중요 참고 자료:-

1. 초보자를 위한 이 비디오 Nuxt.js vuex 스토어를 위한 비디오 Nuxt.js 튜토리얼 보기
2. 이 블로그 읽기 Nuxt + Vuex를 효율적으로 이해하고 사용

Nuxt는 « 모듈 모드가 아닌 클래식 vuex 스토어를 사용하기 때문에 이 경고를 표시한다. »당신은 nuxt doc에서 더 많은 것을 배울 수 있다.

참조URL: https://stackoverflow.com/questions/57666738/vuex-classic-mode-for-store-is-deprecated-and-will-be-removed-in-nuxt-3