vuex not loading module decorated with vuex-module-decorators - decorator

Question

I get this error when trying to load a store module with the vuex-module-decorators into the initialiser:
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)
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);
I took this setup from: https://github.com/calvin008/vue3-admin
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.
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 :/
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 :/

Answer 1

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);
The result is it all works.