为了能在nuxt上跑通 vue3的项目, 仅 创建了登录页面和相关组件
登录页面和组件上涉及的 useRoute, useRouter等 已经无需再手动引入, 直接可以用
但vuex, 虽然默认也已经可以使用,但 vuex项目 拷贝过来的store文件夹, 一直报错, 引用出错
由于typescript不熟, 实在调不通的情况下,只能把store目录下的Index.ts,改成 最简单的创建
方式 ,
import { createStore } from "vuex";
import userInfos from "./modules/userInfos";
import themeConfig from "./modules/themeConfig";
// import getters from "./getters";
const store = createStore({
modules: {
themeConfig,
userInfos,
},
// getters,
});
// export default useStore;
export function useStore() {
return store;
}
//页面上引用方式
import { useStore } from "@/store/index";
const store = useStore();
console.log(store.state.themeConfig.themeConfig.globalTitle)
通过改造以后, 发现, 原来的代码, 如果不涉及
竟然也可以通, 就可以动态引入文件了
// import { InjectionKey } from "vue";
// import { createStore, useStore as baseUseStore, Store } from "vuex";
import { createStore } from "vuex";
import { RootStateTypes } from "@/store/interface/index";
const modulesFiles = import.meta.globEager("./modules/*.ts");
const pathList: string[] = [];
for (const path in modulesFiles) {
pathList.push(path);
}
const modules = pathList.reduce(
(modules: { [x: string]: any }, modulePath: string) => {
const moduleName = modulePath.replace(/^\.\/modules\/(.*)\.\w+$/, "$1");
const value = modulesFiles[modulePath];
modules[moduleName] = value.default;
return modules;
},
{}
);
// export const key: InjectionKey<Store<RootStateTypes>> = Symbol();
export const store = createStore<RootStateTypes>({ modules });
// export function useStore() {
// return baseUseStore(key);
// }
export function useStore() {
return store;
}
//页面上引用方式
import { useStore } from "@/store/index";
const store = useStore();
console.log(store.state.themeConfig.themeConfig.globalTitle)
只是没有使用 InjectionKey Symbol()会报错,目前还不了解原因
// export const key: InjectionKey<Store<RootStateTypes>> = Symbol();
// export function useStore() {
// return baseUseStore(key);
// }
vuex总归是通了