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項目中的使用的文章就介紹到這瞭,更多相關vue3-pinia-ts使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue3+pinia的快速入門使用教程
- Vue項目如何保持用戶登錄狀態(localStorage+vuex刷新頁面後狀態依然保持)
- Vue狀態管理庫Pinia詳細介紹
- 還在用vuex?來瞭解一下pinia
- Vue中設置登錄驗證攔截功能的思路詳解