vue3 + ts + vuex +vite项目中的问题

ts 问题

使用ts+vue3的时候需要如需使用 @ 和 ~@ 代表某个路径的话。不能只在vite.config.ts中配置,还需在tsconfig.josn中配置才可以使用

    //vite.config.ts中配置
      import { resolve } from 'path' 
      resolve: {
          alias: {
            // 设置路径
            '~': resolve(__dirname, './'), //绝对路径 /
            // 设置别名
            '@': resolve(__dirname, './src'), //src的绝对路径，@这会就代表项目的src文件夹下
          },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    },
    //tsconfig.josn中配置
    "baseUrl": "./", //要设置paths，这一项必填
    "paths":{
      "@": ["src"],
      "@/*": ["src/*"],
    }

• 这样就可以实现@代表src路径了

vuex在ts语言下实现模块化，这里简历了一个user模块和一个settings模块。这里主要是如何在ts中使用

    //index.ts文件中
    //首先实现vue注册store
    import { InjectionKey } from 'vue'
    import { createStore, useStore as baseUseStore, Store } from 'vuex'
    import { store as settings, SettingsState } from './settings'
    import { store as user, UserState } from './user'
    //这里获取类型settings和user的类型组成一个新类型State,这个新类型就是index文件store的类型
    export interface State {
      settings: SettingsState;
      user: UserState;
    }
    export const key: InjectionKey<Store<State>> = Symbol()
    export const store = createStore<State>({
      modules: {
        settings, //模块1
        user //模块2
      }
    })
    export function useStore() {
        return baseUseStore(key)
    }
    
    //在main.ts文件中
    //注册vuex
    app.use(store, key)
    
    //在settings.ts中
    import { Module } from "vuex"; //这里要引入Module工具类型
    import { State as rootState, State } from './index'
    export interface SettingsState {
        props: string, //这里定义类型，导出到index中使用
    }
    export const store: Module<SettingsState, rootState> = { 
        //Module<S, R> S对应的是当前模块的state类型，rootState代表的index.ts的类型
        state: ():SettingsState =>({ //这里定义state
            props: '',
        }),
        mutations:{},
        actions:{}
    }

• 这样就可以实现vuex的模块化了

记录代码

//实现把请求来的info，填入state中的info，如果info中的循环的当条数据存在于userInfo，那就把赋值过去
type Info = keyof (typeof state.userInfo) //获取所有key的类型
Object.entries(info).forEach(([key, val]: [any, any]) => {
    if (Object.keys(state.userInfo).includes(key)) {
       state.userInfo[<Info>key] = val;
    }
})