반응형
vuex-module-decorator와 @nuxtjs/auth를 함께 사용할 때 오류 발생
nuxtjs를 typescript와 함께 사용하고 vuex-module-decorator를 사용하지만 추가 시 오류가 발생합니다.@nuxtjs/auth
할 수 있습니다.
Uncaughed(약속되지 않음) 오류: ERR_STORE_NOT_PROVIDED: getModule()을 사용하려면 모듈을 데코레이터(@Module({store:store})에 저장하거나 getModule()을 호출할 때 저장해야 합니다.$store)
이 오류는 Action을 호출할 때 발생합니다.
언제@nuxtjs/auth
모듈에서는 괜찮습니다.
스토어/index.ts
import { Store } from "vuex";
import { initializeStores } from "~/utils/store-accessor";
const initializer = (store: Store<any>) => initializeStores(store);
export const plugins = [initializer];
export * from "~/utils/store-accessor";
utils/store-accessor
/* eslint-disable import/no-mutable-exports */
import { Store } from "vuex";
import { getModule } from "vuex-module-decorators";
import { NuxtAxiosInstance } from "@nuxtjs/axios";
import Login from "~/store/Login";
import App from "~/store/App";
let $axios: NuxtAxiosInstance;
function initializeAxios(axiosInstance: NuxtAxiosInstance) {
$axios = axiosInstance;
}
let loginStore: Login, appStore: App;
function initializeStores(store: Store<any>): void {
loginStore = getModule(Login, store);
appStore = getModule(App, store);
}
export { initializeStores, initializeAxios, loginStore, appStore, $axios };
덧붙이다 vuex: false
로.auth
에nuxt.config.js
add errors는 사라졌지만, 지금은 에 액세스할 수 없습니다.$auth.user
컴포넌트 내.그래서 제가 직접 하고 vuex에 사용자 스토어를 만들고 사용자 정보를 수동으로 가져옵니다.
다음과 같이 plugin/auth.js를 추가합니다.
import { initialiseStores } from "~/utils/store-accessor";
export default function ({ $auth, store }) {
initialiseStores(store);
$auth.onError((error, name, endpoint) => {
console.log(name, error, endpoint);
});
$auth.onRedirect((to, from) => {
// you can optionally change `to` by returning a new value
});
}
그런 다음 다음과 같이 구성 요소에서 작업을 실행할 수 있습니다.
import moduleName from "@/store"
...
methods: {
m() {
moduleName.someAction()
}
}
언급URL : https://stackoverflow.com/questions/62923455/error-when-using-vuex-module-decorators-and-nuxtjs-auth-together
반응형
'programing' 카테고리의 다른 글
바이트 어레이를 문자열로 변환하거나 그 반대로 변환하는 방법 (0) | 2022.08.08 |
---|---|
c11에서의 멀티스레딩 지원 (0) | 2022.08.08 |
라우터 가드에서 vue-module execute graphql 쿼리 (0) | 2022.08.07 |
Vue 3 - inject()는 설정 또는 기능 컴포넌트 내에서만 사용할 수 있습니다. (0) | 2022.08.07 |
v-model vuej 대신 v-bind 및 v-on 사용 (0) | 2022.08.07 |