vue3初探----(vue3项目)vuex4.x中使用typescript最终写法

vuex4+typescript最终写法

一、vue3初探—vue3新特性学习

二、vue3初探—在vue3和vuex4.x中使用typescript

三、vue3初探----(vue3项目)vuex4.x中使用typescript最终写法

四、在三中用到的一些TypeScript中的一些高阶类型 Omit Pick ReturnType Parameters

五、vue3初探----项目构建

六、vue3初探----vue3的一些变化

本章文用到的TypeScript高阶类型见三、vue3初探----(vue3项目)vuex4.x中使用typescript最终版

依然是device和user两个module

src\store\modules\device.ts

export interface DeviceProps {
    imei: string | number;
    deviceName?: string;
}
const state: DeviceProps = {
    imei: 2331333123,
    deviceName: '设备名称'
}

/**
 * Actions
 */
interface Actions {
    NON_ACTION(): void
}
const actions: ActionTree<DeviceProps, GlobalDataProps> & Actions = {
    NON_ACTION() { },
}

/**
 * mutations
 */
type Mutations<S = DeviceProps> = {
    setDeviceName(state: S, payload: string): void
}
const mutations: MutationTree<DeviceProps> & Mutations = {
    setDeviceName(state, payload: string) {
        state.deviceName = payload;
    }
}

/**
 * getters
 */
export type Getters = {
    getImei(state: DeviceProps): string | number
}
export const getters: GetterTree<DeviceProps, GlobalDataProps> & Getters = {
    getImei: (state) => state.imei,
}
// Omit<T, K>​ 类型让我们可以从另一个对象类型中剔除某些属性，并创建一个新的对象类型
export type DeviceStore<S = DeviceProps> = Omit<
    Store<S>,
    'getters' | 'commit' | 'dispatch'
> & {                                          //Parameters<T>的作用是用于获取函数 T 的参数类型
    commit<K extends keyof Mutations, P extends Parameters<Mutations[K]>[1]>(
        key: K,
        payload: P,
        options?: CommitOptions
    ): ReturnType<Mutations[K]>
} & {
    dispatch<K extends keyof Actions>(
        key: K,
        payload: Parameters<Actions[K]>[1],
        options?: DispatchOptions
    ): ReturnType<Actions[K]>
} & {
    getters: {
        // [K in keyof T] ，K表示所有 T 中的键被拆分成一个个键，后面可以声明类型
        //<T>`的作用是用于`获取函数 T 的返回类型`。
        [K in keyof Getters]: ReturnType<Getters[K]>
    }
}

const device: Module<DeviceProps, GlobalDataProps> = {
    state,
    getters,
    mutations,
    actions,
};

export default device;

src\store\modules\user.ts

import { Module, ActionTree, MutationTree, GetterTree, CommitOptions, Store, DispatchOptions } from "vuex";
import { GlobalDataProps } from "../index";
/**
 * state
 */
export interface DeviceProps {
    imei: string | number;
    deviceName?: string;
}
const state: DeviceProps = {
    imei: 2331333123,
    deviceName: '设备名称'
}
/**
 * Actions
 */
interface Actions {
    NON_ACTION(): void
}
const actions: ActionTree<DeviceProps, GlobalDataProps> & Actions = {
    NON_ACTION() { },
}
/**
 * mutations
 */
type Mutations<S = DeviceProps> = {
    setDeviceName(state: S, payload: string): void
}
const mutations: MutationTree<DeviceProps> & Mutations = {
    setDeviceName(state, payload: string) {
        state.deviceName = payload;
    }
}
/**
 * getters
 */
export type Getters = {
    getImei(state: DeviceProps): string | number
}

export const getters: GetterTree<DeviceProps, GlobalDataProps> & Getters = {
    getImei: (state) => state.imei,
}



export type DeviceStore<S = DeviceProps> = Omit<
    Store<S>,
    'getters' | 'commit' | 'dispatch'
> & {
    commit<K extends keyof Mutations, P extends Parameters<Mutations[K]>[1]>(
        key: K,
        payload: P,
        options?: CommitOptions
    ): ReturnType<Mutations[K]>
} & {
    dispatch<K extends keyof Actions>(
        key: K,
        payload: Parameters<Actions[K]>[1],
        options?: DispatchOptions
    ): ReturnType<Actions[K]>
} & {
    getters: {
        [K in keyof Getters]: ReturnType<Getters[K]>
    }
}

const user: Module<DeviceProps, GlobalDataProps> = {
    state,
    getters,
    mutations,
    actions,
};

export default user;

src\store\index.ts

import { createStore, useStore as baseUseStore, Store as VuexStore } from 'vuex'
import device, { DeviceProps, DeviceStore } from "./modules/device";//引入device模块
import user, { UserProps, UserStore } from "./modules/user";//引入用户模块
export interface GlobalDataProps {
    user: UserProps;
    device: DeviceProps;
}
export type Store = DeviceStore<Pick<GlobalDataProps, 'device'>> &
    UserStore<Pick<GlobalDataProps, 'user'>>

//createStore接收一个泛型来定义根state的类型
export const store = createStore<GlobalDataProps>({
    modules: {
        user,
        device,
    },
});
// 定义自己的 `useStore` 组合式函数
export function useStore(): Store {
    return store as Store
}

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { store } from './store'
const app = createApp(App)
app.use(store).mount('#app')

复杂的项目可以将每个modules中的state，getters、mutations、actions分别放在不同的文件中

未定义方法或方法错误

参数类型错误

代码提示