vuex 不加载用 vuex-module-decorators 装饰的模块

Question

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

vuex.esm.js?2f62:261 Uncaught TypeError: Cannot read property 在 Array.forEach 的 eval (vuex.esm.js?2f62:261) 处未定义的“吸气剂” () 在 assertRawModule (vuex.esm.js?2f62:260) 在 ModuleCollection.register (vuex.esm.js?2f62:186) 在 eval (vuex.esm.js?2f62:200) 在 Array.forEach 评估 (vuex.esm.js?2f62:75) () 在 ModuleCollection.register 的 forEachValue (vuex.esm.js?2f62:75) (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 状态：/

Answer 1

我发现答案是示例 vue 管理应用程序的结构不完全正确。

改为从模块中导出类：

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

结果是一切正常。