programing

Vuex 모듈을 추가할 때 "rawModule is defined"라고 표시되는 이유는 무엇입니까?

copysource 2022. 8. 11. 23:15
반응형

Vuex 모듈을 추가할 때 "rawModule is defined"라고 표시되는 이유는 무엇입니까?

최근에 처음으로 Vuex에 모듈을 구현하는 데 어려움을 겪었습니다.표시된 콘솔 오류 메시지에 대한 자세한 정보를 찾을 수 없었습니다(rawModule is undefined그래서 제가 마주친 문제와 해결책을 공유하려고 합니다.몇 가지 예를 들면서 모듈 구현의 간단한 버전을 실행하고 있었습니다.

export const store = new Vuex.Store({
  state: {
    loggedIn: false,
    user: {},
    destination: ''
  },
  mutations: {
    login: state => state.loggedIn = true,
    logout: state => state.loggedIn = false,
    updateUser: ( state, user ) => { state.user = user },
    updateDestination: ( state, newPath ) => { state.destination = newPath }
  },
  modules: {
    project
  },
});

const project = {
  state: {}
}

문제는 결국 Vuex 스토어에 모듈을 추가하려고 한 후 모듈을 선언했다는 것입니다.Variable Hoosting으로 인해 모듈을 나중에 신고해도 된다고 생각했지만, 그렇지 않은 것 같습니다.동작하는 코드는 다음과 같습니다.

const project = {
  state: {}
}

export const store = new Vuex.Store({
  state: {
    loggedIn: false,
    user: {},
    destination: ''
  },
  mutations: {
    login: state => state.loggedIn = true,
    logout: state => state.loggedIn = false,
    updateUser: ( state, user ) => { state.user = user },
    updateDestination: ( state, newPath ) => { state.destination = newPath }
  },
  modules: {
    project
  },
});

이게 시간을 좀 절약해주길 바라.서류상으로는 주문해야 할 것이 전혀 보이지 않았기 때문에, 그것이 중요한 것이어서 놀랐습니다.왜 이런 식으로 작동하는지 아는 사람이 있다면 정말 듣고 싶어요!아마 그 이유는Vuex.Store()함수가 호출되기 전에project값이 설정되므로 프로젝트 모듈의 값은 다음과 같이 캡슐화됩니다.undefined그래서 에러가 발생합니까?

클래스 컴포넌트를 사용하고 있는 경우 모듈 Import 전에 스토어 Import를 배치합니다.예를 들어 다음과 같습니다.

// This is wrong
import { getModule } from "vuex-module-decorators";
import AppModule from "@/store/app-module";
import store from "@/store";

const appModule = getModule(AppState, store);
// This work
import { getModule } from "vuex-module-decorators";
import store from "@/store"; // Before first
import AppModule from "@/store/app-module"; // Then import the module

const appModule = getModule(AppState, store);

언급URL : https://stackoverflow.com/questions/48590047/why-am-i-getting-rawmodule-is-undefined-when-adding-vuex-modules

반응형