vue3-pinia-ts项目中的使用示例详解
更新时间:2022年8月8日 22:11 点击:715 作者:QQ帝国
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使用内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/QQ_Empire/article/details/126225532
上一篇: 详解Vue3-pinia状态管理
下一篇: JS前端中的设计模式和使用场景示例详解
相关文章
php 中file_get_contents超时问题的解决方法
file_get_contents超时我知道最多的原因就是你机器访问远程机器过慢,导致php脚本超时了,但也有其它很多原因,下面我来总结file_get_contents超时问题的解决方法总结。...2016-11-25- 有时为了网站安全和版权问题,会对自己写的php源码进行加密,在php加密技术上最常用的是zend公司的zend guard 加密软件,现在我们来图文讲解一下。 下面就简单说说如何...2016-11-25
php file_get_contents 设置代理抓取页面示例
file_get_contents函数在php中可以直接打开本地文件也可以直接抓取远程服务器文件,如果简单的采集我们可以使用file_get_contents直接来操作,如果有防采集我们可能需要...2016-11-25- ps软件是现在很多人都会使用到的,HSL面板在ps软件中又有着非常独特的作用。这次文章就给大家介绍下ps怎么使用HSL面板,还不知道使用方法的下面一起来看看。  ...2017-07-06
- 这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
- 许多的朋友对于Plesk控制面板应用不是非常的了解特别是英文版的Plesk控制面板,在这里小编整理了一些关于Plesk控制面板常用的使用方案整理,具体如下。 本文基于Linu...2016-10-10
使用insertAfter()方法在现有元素后添加一个新元素
复制代码 代码如下: //在现有元素后添加一个新元素 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newEl...2014-05-31- 大概有如下步骤 新建项目Bejs 新建文件package.json 新建文件Gruntfile.js 命令行执行grunt任务 一、新建项目Bejs源码放在src下,该目录有两个js文件,selector.js和ajax.js。编译后代码放在dest,这个grunt会...2014-06-07
使用percona-toolkit操作MySQL的实用命令小结
1.pt-archiver 功能介绍: 将mysql数据库中表的记录归档到另外一个表或者文件 用法介绍: pt-archiver [OPTION...] --source DSN --where WHERE 这个工具只是归档旧的数据,不会对线上数据的OLTP查询造成太大影响,你可以将...2015-11-24如何使用php脚本给html中引用的js和css路径打上版本号
在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css、js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css、...2015-11-24php报错file_get_contents(): php_network_getaddresses问题
本文章来为各位介绍一篇关于file_get_contents(): php_network_getaddresses: getaddrinfo failed: Name or service not known...错误解决办法。 昨天,服务器的DN...2016-11-25jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合...2014-05-31- 一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24
安装和使用percona-toolkit来辅助操作MySQL的基本教程
一、percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务,这些任务包括: 检查master和slave数据的一致性 有效地对记录进行归档 查找重复的索...2015-11-24- C#注释的一些使用方法浅谈,需要的朋友可以参考一下...2020-06-25
- 目前,JSON已经成为最流行的数据交换格式之一,各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》,探讨它的设计思想。今天,我想总结一下PHP语言对它的支持,这是开发互联网应用程序(特别是编写API)必须了解的知识...2015-10-30
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 无限级分类在开发中经常使用,例如:部门结构、文章分类。无限级分类的难点在于“输出”和“查询”,例如 将文章分类输出为<ul>列表形式; 查找分类A下面所有分类包含的文章。1.实现原理 几种常见的实现方法,各有利弊。其中...2015-10-23
- php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25
- file_get_contents的超时处理话说,从PHP5开始,file_get_content已经支持context了(手册上写着:5.0.0 Added the context support. ),也就是说,从5.0开始,file_get_contents其实也可以POST数据。今天说的这篇是讲超时的,确实在...2013-10-04