vue3初探---在vue3和vuex4.x中使用typescript

在vue3和vuex4.x中使用typescript

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

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

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

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

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

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

本篇vuex4.x中使用typescript只是进行了简单的介绍（适合小项目），vue3初探----(vue3项目)vuex4.x中使用typescript最终写法专门介绍一vuex4+typescript的使用

vue3中使用typescript

props

在vue3中使用PropType来定义复杂数据类型的prop

export default defineComponent({
	name: 'user-profile',
	components: { user },
	props: {
		//对象
		user: {
			type: Object as PropType<UserProps>,
			required: true,
		},
		// 数组
		users: {
			type: Array as PropType<UserProps[]>,
			required: true,
		},
		//方法
		callback: {
			type: Function as PropType<() => void>,
		},
		//ang
		metadata: {
			type: null, // metadata 的类型是 any
		},
	},
	setup() {
		return {}
	},
})

refs

   const year = ref<number|string>(2020)//只有这一种方式
   const year:number = ref(2020)//报错

reactive

 const book = reactive<Book>({ title: 'Vue 3 Guide' })
    // or
 const book: Book = reactive({ title: 'Vue 3 Guide' })
    // or
 const book = reactive({ title: 'Vue 3 Guide' }) as Book

vuex4.x中使用typescript

npm install vuex@next --save

vuex普通写法

import { createStore } from "vuex";
export interface GlobalDataProps {
    user: UserProps;
    device: DeviceProps;
}
export interface DeviceProps {
    imei: string | number;
    deviceName?: string;
}
export interface UserProps {
    isLogin: boolean;
    userName?: string;
}
//createStore接收一个泛型来定义根state的类型
const store = createStore<GlobalDataProps>({
    state: {
        device: {
            imei: 2331333123,
            deviceName: '设备名称'
        },
        user: {
            isLogin: true,
            userName: 'guoang'
        },
    },
    mutations: {
    
    }
});

export default store;

vue中使用

<template>
    <div>{{userName}}</div>
    <button @click="setDeviceName">setDeviceName</button>
</template>
<script  lang="ts">
import { useStore } from 'vuex';
import { computed } from 'vue';
import { GlobalDataProps } from '../store';
export default {
    setup() {
        // useStore接收反向定于全局state的数据类型
        const store = useStore<GlobalDataProps>();
        const userName = computed(() => store.state.user.userName);
        const setDeviceName = () => {
            store.commit('setDeviceName', '哈哈哈');
        };
        return {
            userName,
            setDeviceName
        };
    }
};
</script>

vuex4中使用modules

一些关于如何在vue4X中使用modules的讨论 https://github.com/vuejs/vuex/issues/1833

store/index.ts

通过vuex中的createStore来创建store同时createStore接收一个泛型来定义根state的类型

import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
import device, { DeviceProps } from "./device";//引入device模块
import user, { UserProps } from "./user";//引入用户模块
export interface GlobalDataProps {
    user: UserProps;
    device: DeviceProps;
}
// 定义 injection key
export const key: InjectionKey<Store<GlobalDataProps>> = Symbol()
//createStore接收一个泛型来定义根state的类型
export const store = createStore<GlobalDataProps>({
    modules: {
        user,
        device,
    },
});
// 定义自己的 `useStore` 组合式函数
export function useStore() {
    return baseUseStore(key)
}

store/user.ts

每个Module都是一个普通的对象

Module必须定义为Module类型，同时Module接收两个泛型 interface Module<S, R> 第一个是当前模块state类型，第二个是全局state类型

​ Module的类型定义

在getter中有三个参数第一个和第三个分别是当前模块state和全局state

import { Module } from "vuex";
import { GlobalDataProps } from "./index";

export interface UserProps {
    isLogin: boolean;
    userName?: string;
}
//Module接收两个泛型  interface Module<S, R>   第一个是当前模块state类型，第二个是全局state类型
const user: Module<UserProps, GlobalDataProps> = {
    state: {
        isLogin: true,
        userName: 'guoang'
    },
    mutations: {
        login(state) {
            state.isLogin = true;
            state.userName = "guoang";
        },
        logout(state) {
            state.isLogin = false;
        },
    },
    getters: {
        getUserName: (state, getters, rootState) => (id: number) => {
            return state.userName
        },
    },
};

export default user;

store/user.ts

import { Module } from "vuex";
import { GlobalDataProps } from "./index";

export interface DeviceProps {
    imei: string | number;
    deviceName?: string;
}

const user: Module<DeviceProps, GlobalDataProps> = {
    state: {
        imei: 2331333123,
        deviceName: '设备名称'
    },
    mutations: {
        setDeviceName(state,payload:string) {
            state.deviceName = payload;
        }
    },
};

export default user;

在vue中使用

在vue中通过useStore获取store，useStore接收泛型定义根state的类型

<template>
    <div>{{userName}}</div>
    <button @click="setDeviceName">setDeviceName</button>
</template>
<script  lang="ts">
import { computed } from 'vue';
import { useStore } from '../store';
export default {
    setup() {
        // useStore接收泛型定于全局state的数据类型
        const store = useStore();
        const userName = computed(() => store.state.user.userName);
        const setDeviceName = () => {
            store.commit('setDeviceName', '哈哈哈');
        };
        return {
            userName,
            setDeviceName
        };
    }
};
</script>

使用vuex时的代码提示

但是到目前只有state的类型检测和类型提示，getters、mutations、actions的检测并没有