vuex未加载用vuex-module-decorators装饰的模块 [英] vuex not loading module decorated with vuex-module-decorators

问题描述

当尝试将带有vuex-module-decorators的存储模块加载到初始化程序中时，出现此错误:

I get this error when trying to load a store module with the vuex-module-decorators into the initialiser:

vuex.esm.js?2f62:261未捕获的TypeError:无法读取属性 在Array.forEach的eval(vuex.esm.js?2f62:261)处未定义的'getters' ()在assertRawModule(vuex.esm.js?2f62:260)在 eval上的ModuleCollection.register(vuex.esm.js?2f62:186) (vuex.esm.js?2f62:200)在val.(vuex.esm.js?2f62:75)在Array.forEach ()在ModuleCollection.register的forEachValue(vuex.esm.js?2f62:75) (vuex.esm.js?2f62:199)在新的ModuleCollection(vuex.esm.js?2f62:160)

vuex.esm.js?2f62:261 Uncaught TypeError: Cannot read property 'getters' of undefined at eval (vuex.esm.js?2f62:261) at Array.forEach () at assertRawModule (vuex.esm.js?2f62:260) at ModuleCollection.register (vuex.esm.js?2f62:186) at eval (vuex.esm.js?2f62:200) at eval (vuex.esm.js?2f62:75) at Array.forEach () at forEachValue (vuex.esm.js?2f62:75) at ModuleCollection.register (vuex.esm.js?2f62:199) at new ModuleCollection (vuex.esm.js?2f62:160)

index.ts文件非常简单，在我向初始化程序介绍模块之前，所有工作都可以进行:

The index.ts file is quite simple and all works until i introduce the modules to the initialiser:

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;

这是我认为引发错误的身份验证模块:

Here is the authentication module i believe is throwing the error:

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

I took this setup from: https://github.com/calvin008/vue3-admin

我不知道这是一个错误还是一个设置问题，但是完全卡在这里，因为我打算在这里使用vuex-persist在页面重新加载后为商店补水".

I don't know if this is a bug or if this is a setup issue but completely stuck here as I intend to use the vuex-persist here to "rehydrate" the store after page reload.

使用此lib声明商店的另一种完全不同的方式是: https://github.com/eladcandroid/typescript-vuex-example/blob/master/src/components/Profile.vue ，但是语法似乎在vue3-admin在商店中与组件相对整齐.

Another completely different way of declaring the stores with this lib was here: https://github.com/eladcandroid/typescript-vuex-example/blob/master/src/components/Profile.vue but the syntax seems it would get wildly verbose when in the vue3-admin it is alll neatly in the store opposed to the component.

目前，我已将所有状态很好地保存到本地存储中，但由于此错误或缺少示例，我不知道如何用此存储的数据对存储进行补水:/

Currently I have all the state nicely persisted to local storage but I have no idea due to this error or and lack of exmaple how rehydrate the store with this stored data :/

似乎有两种使用装饰器的方法，但两者却大不相同.我喜欢从vie管理员那里找到的方法，因为这些组件很干净，但是我不能以 https://www.npmjs.com/package/vuex-persist#detailed 状态应完成:/

It seems there are two ways to use the decorators but both are quite different. I like the method i have found from the vie admin as the components are nice and clean, but i cannot inject the modules as https://www.npmjs.com/package/vuex-persist#detailed states should be done :/

推荐答案

我发现答案是示例vue管理员应用的结构不正确.

I found the answer to be the example vue admin app was not structured quite correctly.

而不是从模块中导出类:

Instead to export the class from the module:

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

然后将类作为模块插入到索引中，并通过装饰器将模块导出，但还将商店注入到所述装饰器中:

Then inject the class as a module into the index and export the module via the decorator but also inject the store into the said decorator:

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

结果就是一切正常.

这篇关于vuex未加载用vuex-module-decorators装饰的模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！