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如何使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！