尝试搭建 Vue3+nuxt3+typescript+vuex+i18n+axios+element plus+...(三) 之 vuex

为了能在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总归是通了