vuex가 vuex-contracator로 장식된 모듈을 로드하지 않음

vuex가 vuex-contracator로 장식된 모듈을 로드하지 않음

vuex-module-decorator를 사용하여 스토어 모듈을 이니셜라이저에 로드하려고 하면 다음 오류가 발생합니다.

vuex.esm.js?2f62:261 Unchatched TypeError:Module(레지스터)에서 Array.for()의 eval(vuex.esm.js?2f62:261)에서 정의되지 않은 속성 'getters'를 읽을 수 없습니다.t ModuleCollection.register(vuex.esm.js?2f62:199)를 새로운 ModuleCollection(vuex.esm.js?2f62:160)으로 설정합니다.

index.ts 파일은 매우 간단하며 이니셜라이저에 모듈을 소개할 때까지 모두 작동합니다.

import Vue from 'vue';
import Vuex from 'vuex';
import { AuthenticationModule, IAuthenticationState } from './modules/authentication';
import VuexPersistence from 'vuex-persist';

Vue.use(Vuex);

export interface IRootState {
  authentication: IAuthenticationState;
}

const vuexLocal = new VuexPersistence({
  storage: window.localStorage,
});

const store = new Vuex.Store<IRootState>({
  modules: {
    authentication: AuthenticationModule, // if this is not here it works but this will mean the vuex-persist will not work
  },
  plugins: [vuexLocal.plugin],
});

export default store;

다음으로 에러가 발생하고 있다고 생각되는 인증 모듈을 나타냅니다.

import { Action, getModule, Module, Mutation, VuexModule } from 'vuex-module-decorators';
import { Generic422, LoginEmailPost, RegisterPost, TokenRenewPost, User, UserEmailPut, UserPasswordPut, UserPut } from '@/api/ms-authentication/model/models';
import { Api } from '@/services/ApiHelper';
import Auth from '@/services/Auth';
import store from '@/store';

export interface IAuthenticationState {
  user: User;
  authenticated: boolean;
  prompt: {
    login: boolean,
  };
  errorRegister: Generic422;
  errorLogin: Generic422;
}

const moduleName = 'authentication';

@Module({dynamic: true, store, name: moduleName})
class Authentication extends VuexModule implements IAuthenticationState 
{
  public authenticated: boolean = false;
  public errorRegister: Generic422 = {};
  public errorLogin: Generic422 = {};
  public prompt = {
    login: false,
  };
  public user: User = {
    email: '',
    firstName: '',
    lastName: '',
    birthday: '',
    verified: false,
  };
  @Action({commit: 'SET_USER'})
  public async login(data: LoginEmailPost) {
    try {
      const resp = await Api.authenticationApi.v1LoginEmailPost(data);
      Auth.injectAccessJWT(resp.data.tokenAccess.value);
      Auth.injectRenewalJWT(resp.data.tokenRenewal.value);
      return resp.data.user;
    } catch (e) {
      return e.statusCode;
    }
  }
  @Mutation
  public SET_USER(user: User) {
    this.authenticated = true;
    this.user = {...this.user, ...user};
  }
}

export const AuthenticationModule = getModule(Authentication);

이 셋업은 https://github.com/calvin008/vue3-admin 에서 취득했습니다.

이것이 버그인지 셋업 문제인지는 모르겠지만 페이지 새로고침 후 스토어를 "재충전"하기 위해 vuex-persist를 사용하려고 하기 때문에 완전히 여기에 갇혀 있습니다.

이 lib를 사용하여 스토어를 선언하는 다른 완전히 다른 방법은 https://github.com/eladcandroid/typescript-vuex-example/blob/master/src/components/Profile.vue이지만 vue3-admin에서 컴포넌트와 반대되는 스토어에 모두 깔끔하게 배치되어 있으면 구문이 매우 상세해질 수 있습니다.

현재 모든 상태를 로컬 스토리지에 적절하게 유지하고 있지만, 이 오류나 저장된 데이터로 저장소가 어떻게 다시 채워지는지 알 수 없기 때문에 알 수 없습니다.

데코레이터를 사용하는 방법은 두 가지가 있는 것 같습니다만, 둘 다 상당히 다릅니다.컴포넌트가 깨끗하고 깨끗하기 때문에 vie admin에서 찾은 방법은 좋지만 https://www.npmjs.com/package/vuex-persist#detailed 상태가 실행되어야 하기 때문에 모듈을 삽입할 수 없습니다./

vue admin app이 올바르게 구성되어 있지 않은 예라는 것을 알았습니다.

대신 모듈에서 클래스를 내보내는 경우:

@Module({ name: 'authentication' })
export default class Authentication extends VuexModule implements IAuthenticationState {

그런 다음 클래스를 인덱스에 모듈로 삽입하고 모듈을 데코레이터를 통해 내보내는 동시에 스토어를 해당 데코레이터에 삽입합니다.

import Vue from 'vue';
import Vuex from 'vuex';
import Authentication from './modules/authentication';
import VuexPersistence from 'vuex-persist';
import { getModule } from 'vuex-module-decorators';

Vue.use(Vuex);

const vuexLocal = new VuexPersistence({
  storage: window.localStorage,
});

const store = new Vuex.Store({
  modules: {
    authentication: Authentication,
  },
  plugins: [vuexLocal.plugin],
});

export default store;
export const AuthenticationModule = getModule(Authentication, store);

그 결과 모든 것이 작동하게 됩니다.

언급URL : https://stackoverflow.com/questions/55843052/vuex-not-loading-module-decorated-with-vuex-module-decorators