我按照this教程使用TypeScript设置了一个包含模块的Vuex商店。
到目前为止我有:
变量/类型.ts:
export interface RootState {
version: string;
}
vuex/用户配置文件.ts:
import { ActionTree, Module, MutationTree } from 'vuex';
import { RootState } from './types';
interface User {
firstName: string;
uid: string;
}
interface ProfileState {
user?: User;
authed: boolean;
}
const state: ProfileState = {
user: undefined,
authed: false,
};
const namespaced: boolean = true;
export const UserProfile: Module<ProfileState, RootState> = {
namespaced,
state,
};
商店.ts:
import Vue from 'vue';
import Vuex, { StoreOptions } from 'vuex';
import { UserProfile } from '@/vuex/user-profile';
import { RootState } from '@/vuex/types';
Vue.use(Vuex);
const store: StoreOptions<RootState> = {
state: {
version: '1.0.0',
},
modules: {
UserProfile,
},
};
export default new Vuex.Store<RootState>(store);
在我的router.ts中,我想访问存储的authed
状态,如下所示:
import store from './store';
//...other imports...
const router = new Router({
//... route definitions...
});
router.beforeEach((to, from, next) => {
const isAuthed = store.state.UserProfile.authed;
if (to.name !== 'login' && !isAuthed) {
next({ name: 'login' });
} else {
next();
}
});
代码工作正常(应用程序正确重定向),然而,编译器抛出错误Property 'UserProfile' does not exist on type 'RootState'
,这是有意义的,因为它没有定义,但它不应该在模块下寻找,或者我没有正确定义模块?
5条答案
按热度按时间fivyi3re1#
您需要定义rootState接口的所有存储,如下所示:
您也可以从UserProfile导入接口,并使用来代替any。因为您不使用pascal大小写的文件名
这将告诉rootState期望一个名为UserProfile的vuex存储,它具有任何类型或UserProfile接口。
我有一个vuex存储的rootstate接口,如下所示:
guicsvcw2#
编辑:似乎直接访问状态是这里的问题所在。
我相信这是因为它是命名空间的,解决方法是创建一个getter。
然后你就可以访问它
另外,请考虑使用getter来访问状态数据,参考Getters。
xfyts7mz3#
1
2
3
qf9go6mv4#
这是具有依赖项
"vuex": "^4.0.2"
、"vue-router": "^4.0.10"
和"vue": "^3.1.4"
的工作解决方案。将
store
导入router
文件以访问模块中的状态:在我的例子中,模块名是
authModule
,我访问token
的state
,其中存储了一个jwt:kgqe7b3p5#
我建议做一个双转换。一个到任意,一个回到你真正想要的。记住,在下面的最后一个router.ts文件中,“store”是商店的一个示例,另外两个导入只是类型。
为了简洁起见,我省略了命名空间、状态、getter、动作、变化代码,它们只是对象结构
存储/我的模块/类型.ts:
存储/我的模块/索引.ts:
存储/类型。ts:
存储/索引.ts:
在router.ts中: