vue3-pinia-ts如何使用

本篇内容主要讲解“vue3-pinia-ts如何使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue3-pinia-ts如何使用”吧!

 store.ts

import { defineStore } from "pinia"; import { GlobalState, ThemeConfigProp } from "./interface"; import { createPinia } from "pinia"; import piniaPersistConfig from "@/config/piniaPersist"; import piniaPluginPersistedstate from "pinia-plugin-persistedstate";   // defineStore 调用后返回一个函数，调用该函数获得 Store 实体 export const GlobalStore = defineStore({	// id: 必须的，在所有 Store 中唯一	id: "GlobalState",	// state: 返回对象的函数	state: (): GlobalState => ({	// token	token: "",	// userInfo	userInfo: "",	// element组件大小	assemblySize: "default",	// language	language: "",	// themeConfig	themeConfig: {	// 默认 primary 主题颜色	primary: "#409EFF",	// 深色模式	isDark: false,	// 灰色模式	isGrey: false,	// 色弱模式	isWeak: false,	// 面包屑导航	breadcrumb: true,	// 标签页	tabs: true,	// 页脚	footer: true	}	}),	getters: {},	actions: {	// setToken	setToken(token: string) {	this.token = token;	},	// setUserInfo	setUserInfo(userInfo: any) {	this.userInfo = userInfo;	},	// setAssemblySizeSize	setAssemblySizeSize(assemblySize: string) {	this.assemblySize = assemblySize;	},	// updateLanguage	updateLanguage(language: string) {	this.language = language;	},	// setThemeConfig	setThemeConfig(themeConfig: ThemeConfigProp) {	this.themeConfig = themeConfig;	}	},	persist: piniaPersistConfig("GlobalState") });   // piniaPersist(持久化) const pinia = createPinia(); pinia.use(piniaPluginPersistedstate);   export default pinia;

main.ts

import { createApp } from "vue"; import App from "./App.vue"; import pinia from "@/store/index";   ...   const app = createApp(App);   app.use(router).use(I18n).use(pinia).use(directives).use(ElementPlus).mount("#app");

页面使用

<script setup lang="ts"> import { ref, reactive, onMounted } from "vue"; import { useRouter } from "vue-router"; import { Login } from "@/api/interface"; import { CircleClose, UserFilled } from "@element-plus/icons-vue"; import type { ElForm } from "element-plus"; import { ElMessage } from "element-plus"; import { loginApi } from "@/api/modules/login"; import { GlobalStore } from "@/store"; import { MenuStore } from "@/store/modules/menu"; import { TabsStore } from "@/store/modules/tabs"; import md5 from "js-md5";   const globalStore = GlobalStore(); const menuStore = MenuStore(); const tabStore = TabsStore();   // 定义 formRef（校验规则） type FormInstance = InstanceType<typeof ElForm>; const loginFormRef = ref<FormInstance>(); const loginRules = reactive({	username: [{ required: true, message: "请输入用户名", trigger: "blur" }],	password: [{ required: true, message: "请输入密码", trigger: "blur" }] });   // 登录表单数据 const loginForm = reactive<Login.ReqLoginForm>({	username: "",	password: "" });   const loading = ref<boolean>(false); const router = useRouter(); // login const login = (formEl: FormInstance | undefined) => {	if (!formEl) return;	formEl.validate(async valid => {	if (!valid) return;	loading.value = true;	try {	const requestLoginForm: Login.ReqLoginForm = {	username: loginForm.username,	password: md5(loginForm.password)	};	const res = await loginApi(requestLoginForm);	// * 存储 token	globalStore.setToken(res.data!.access_token);	// * 登录成功之后清除上个账号的 menulist 和 tabs 数据	menuStore.setMenuList([]);	tabStore.closeMultipleTab();  	ElMessage.success("登录成功！");	router.push({ name: "home" });	} finally {	loading.value = false;	}	}); };   // resetForm const resetForm = (formEl: FormInstance | undefined) => {	if (!formEl) return;	formEl.resetFields(); };   onMounted(() => {	// 监听enter事件（调用登录）	document.onkeydown = (e: any) => {	e = window.event || e;	if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {	if (loading.value) return;	login(loginFormRef.value);	}	}; }); </script>

到此，相信大家对“vue3-pinia-ts如何使用”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！