Vue3 Pinia Ts项目中，如何详细改写使用示例为长尾关键词？

本文共计568个文字，预计阅读时间需要3分钟。

typescriptimport { defineStore } from 'pinia';import { GlobalState, ThemeConfigProp } from './interface';import { createPinia } from 'pinia';import piniaPersistConfig from '@config/piniaPersist';import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

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使用内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！