尝试将带有vuex-module-decorators的存储模块加载到初始化程序中时,出现此错误:
vuex.esm.js?2f62:261未捕获的TypeError:无法读取属性 在Array.forEach的eval(vuex.esm.js?2f62:261)处未定义的'getters' ()在assertRawModule(vuex.esm.js?2f62:260)在 评估时的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)
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中,它在商店中与组件相对地整齐地整齐地出现时,语法似乎变得非常冗长。 / p>
目前,我已将所有状态很好地保存到本地存储中,但是由于此错误或缺少示例,我不知道如何用此存储的数据对存储进行补水:/
似乎有两种使用装饰器的方法,但两者却大不相同。我喜欢我从vie管理员那里找到的方法,因为这些组件很好而且很干净,但是我不能注入模块,因为https://www.npmjs.com/package/vuex-persist#detailed状态应该完成:/
答案 0 :(得分:0)
我发现答案是示例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);
结果就是一切正常。