модуль vuex не загружается, оформлен модулями-декораторами vuex - PullRequest
Новая
       32

модуль vuex не загружается, оформлен модулями-декораторами vuex

0 голосов
/ 25 апреля 2019

Я получаю эту ошибку при попытке загрузить модуль хранилища с помощью vuex-module-decorators в инициализатор:

vuex.esm.js? 2f62: 261 Uncaught TypeError: Невозможно прочитать свойство 'getters' из undefined в eval (vuex.esm.js? 2f62: 261) в Array.forEach () в assertRawModule (vuex.esm.js? 2f62: 260) в ModuleCollection.register (vuex.esm.js? 2f62: 186) на eval (vuex.esm.js? 2f62: 200) в eval (vuex.esm.js? 2f62: 75) в Array.forEach () в forEachValue (vuex.esm.js? 2f62: 75) в 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, чтобы «повторно увлажнить» хранилище после перезагрузки страницы.

Другой совершенно иной способ объявления хранилищ с этой библиотекой был здесь: https://github.com/eladcandroid/typescript-vuex-example/blob/master/src/components/Profile.vue но синтаксис, кажется, получился бы дико многословным, когда в vue3-admin он совершенно аккуратен в хранилище, в отличие от компонента.

В настоящее время у меня все состояние сохранено в локальном хранилище, но я не знаю, из-за этой ошибки или отсутствия примера того, как повторно сохранить хранилище с этими сохраненными данными: /

Кажется, есть два способа использовать декораторы, но оба совершенно разные. Мне нравится метод, который я нашел у администратора vie, поскольку компоненты хороши и чисты, но я не могу внедрить модули, так как https://www.npmjs.com/package/vuex-persist#detailed состояния должны быть выполнены: /

1 Ответ

0 голосов
/ 25 апреля 2019

Я нашел ответ в качестве примера. Приложение vue admin было структурировано не совсем корректно.

Вместо этого, чтобы экспортировать класс из модуля: 

@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);

В результате все это работает.

...