vue3使用pinia中的actions,需要调用接口的话

actions,需要调用接口的话,假如页面想要调用actions中的方法获取数据,

必须使用try  catch  async  await 进行包裹,详情看下面代码

import {defineStore} from 'pinia'
import {reqCode,reqUserLogin} from '../../api/hospital/index'
import {PhoneTy} from '../../api/hospital/type'
const useUserStore = defineStore('User',{state:()=>{return{visiable: false,//用于控制登录组件的dialog显示与隐藏code: '',//存储用户的验证码,//存储用户的信息userInfo:JSON.parse(localStorage.getItem('USERINFO') as string) || {}}},actions:{//获取短信验证async  getCode(value:string){const r:PhoneTy = await reqCode(value) as anyif(r.code == 200){this.code = r.dataconsole.log(this.code,'this.code1')}console.log(this.code,'this.code2')},//登陆用户async reqUserLogin(value:object){const r = await reqUserLogin(value)this.userInfo = r.datalocalStorage.setItem('USERINFO',JSON.stringify(this.userInfo))console.log(r)}}
})
export default useUserStore

在页面中使用

引入pinia中的插件
import useUserStore from "../../store/modules/user";
let userStore = useUserStore();
//切记需要使用try catch,以及async await配合使用调用的接口,不然获取不到数据//获取短信验证码
const getCode = async()=>{console.log(loginParam.phone,'loginParam.value.phone')try{if(isPhone.value){console.log(isPhone,'isPhone')await userStore.getCode(loginParam.phone);// userStore.getCode(loginParam.phone)console.log(userStore.code,'userStore.code')loginParam.code = userStore.codeflag.value = true;}else{return}}catch(error){}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/41975.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Midjourney 预设

使用命令/settings 进入预设,根据点击不同选项来配置。 🌹 1. 设置工作所使用的模型版本。 1️⃣ MJ Version 1 2️⃣ MJ Version 2 3️⃣ MJ Version 3 4️⃣ MJ Version 4 5️⃣ MJ Version 5 5️⃣ MJ Version 5.1 🔧Raw Mode 🌈 Niji Version 4 🍎 Niji Versio…

深入探索C语言中的结构体:定义、特性与应用

🔥 个人主页:大耳朵土土垚 目录 结构体的介绍结构体定义结构成员的类型结构体变量的定义和初始化结构体成员的访问结构体传参 结构体的介绍 在C语言中,结构体是一种用户自定义的数据类型,它允许开发者将不同类型的变量组合在一起…

数据库管理工具 -- Navicat Premium v17.0.8 特别版

软件简介 Navicat Premium 是一款功能强大的数据库管理工具,适用于Windows、Mac和Linux平台。它支持多种数据库,包括MySQL、MariaDB、SQL Server、PostgreSQL、Oracle、SQLite等。用户可以通过Navicat Premium轻松地连接到各种数据库服务器,…

ASP.NET Core----基础学习02----中间件的执行顺序 静态文件中间件

文章目录 1.终端中间件(Middleware)2.中间件的执行顺序(1)当只有2个中间件的时候,先执行普通中间件,再执行终端中间件(2)当有多个中间件的时候,中间件的执行顺序 3.添加静…

接口自动化测试思路和实战(5):【推荐】混合测试自动化框架(关键字+数据驱动)

混合测试自动化框架(关键字数据驱动) 关键字驱动或表驱动的测试框架 这个框架需要开发数据表和关键字。这些数据表和关键字独立于执行它们的测试自动化工具,并可以用来“驱动"待测应用程序和数据的测试脚本代码,关键字驱动测试看上去与手工测…

Nacos服务注册总流程(源码分析)

文章目录 服务注册NacosClient找看源码入口NacosClient服务注册源码NacosServer处理服务注册 服务注册 服务注册 在线流程图 NacosClient找看源码入口 我们启动一个微服务&#xff0c;引入nacos客户端的依赖 <dependency><groupId>com.alibaba.cloud</groupI…

免密ssh和自定义服务器名字【远程连接服务器】

免密ssh和自定义服务器名字【远程连接服务器】 免密ssh和自定义服务器名字【远程连接服务器】服务器添加本地公钥ssh-copy-id使用别名登录config 免密ssh和自定义服务器名字【远程连接服务器】 原理 实现免密登录需要 本地的公钥id_rsa.pub放在服务器上的 authorized_keys 文件…

Linux 防火墙配置指南:firewalld 端口管理应用案例(二十个实列)

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f427;Linux基础知识(初学)&#xff1a;点击&#xff01; &#x1f427;&#x1f427;Linux高级管理专栏&#xff1a;点击&#xff01; &#x1f510;Linux中firewalld防火墙&#xff1a;点击&#xff01; ⏰️…

Thisjavabean对象数组

This 1.概念 this是一个对象this是一个构造函数 2.介绍 解决局部变量和成员变量命名冲突 this在面向对象-封装那一篇里&#xff0c;有被两个地方提及。 但我们先简单给一个例子&#xff1a; public Person(String name, String phone, String qqPassword, String bankCar…

豆瓣评分9.6,这本书不看损失巨大!

点击上方△腾阳 关注 转载请联系授权 这些年&#xff0c;我就像是个热心向导&#xff0c;逢人就劝读那本《毛泽东选集》。 结果呢&#xff1f;有人一听就摆手&#xff0c;笑言&#xff1a;“哎呀&#xff0c;那书太高大上了&#xff0c;咱啃不动啊&#xff01;” 特别是咱们…

WEB编程-了解Tomcat服务器

第⼀章⽹络编程 1.1 概述 计算机⽹络&#xff1a;是指将地理位置不同的具有独⽴功能的多台计算机及其外部设备&#xff0c;通过通信线路连接起来&#xff0c;在⽹络 操作系统、⽹络管理软件及⽹络通信协议的管理和协调下&#xff0c;实现资源共享和信息传递的计算机系统。 …

智慧矿山建设规划方案(121页Word)

智慧矿山建设项目方案摘要 一、项目背景及现状分析 项目背景 随着信息技术的迅猛发展&#xff0c;智慧化、数字化已成为矿山行业转型升级的必然趋势。智慧矿山建设项目旨在通过集成先进的信息技术手段&#xff0c;实现对矿山生产、管理、安全等全过程的智能化监控与管理&…

SpringBoot新手快速入门系列教程四:创建第一个SringBoot的API

首先我们用IDEA新建一个项目&#xff0c;请将这些关键位置按照我的设置设置一下 接下来我将要带着你一步一步创建一个Get请求和Post请求&#xff0c;通过客户端请求的参数&#xff0c;以json格式返回该参数{“message”:"Hello"} 1,先在IDE左上角把这里改为文件模式…

CP AUTOSAR标准之TimeSyncOverFlexRay(AUTOSAR_CP_SWS_TimeSyncOverFlexRay)(更新中……)

1 简介和功能概述 FrTSyn模块负责处理FlexRay总线上的时间信息分发。   FlexRay机制比CAN机制简单得多,因为它基于这样一个事实,即FlexRay节点彼此同步,否则任何消息都无法在FlexRay上传输。   时间主站和时间从站对FlexRay全局时间的看法相同。因此,只需定义(FlexRay)…

G9 - ACGAN理论与实战

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目录 环境步骤环境设置数据准备工具方法模型设计模型训练模型效果展示 总结与心得体会 上周已经简单的了解了ACGAN的原理&#xff0c;并且不经实践的编写了部分…

Docker 入门篇(十 一)-- 网络配置总结

Docker 容器技术的核心优势之一是其轻量级的虚拟化和隔离性&#xff0c;而 Docker 网络则是实现容器间以及容器与外界通信的关键。以下是对 Docker 网络的关键知识点的总结。 一、 Docker 网络概述 Docker 网络允许容器进行相互通信以及与外部网络的连接。Docker 提供了多种网…

选择结构作业题(五.1)

阿尔法编程第五章(1--30) 1. 输入一个整数,如果是奇数,输出odd;如果是偶数,输出even。 #include <stdio.h> int main() {int n;scanf("%d",&n);{if (n%2==0) printf("even");else printf("odd");}return 0; } 2. 输入一个年…

python如何设计窗口

PyQt是一个基于Qt的接口包&#xff0c;可以直接拖拽控件设计UI界面&#xff0c;下面我简单介绍一下这个包的安装和使用&#xff0c;感兴趣的朋友可以自己尝试一下&#xff1a; 1、首先&#xff0c;安装PyQt模块&#xff0c;这个直接在cmd窗口输入命令“pip install pyqt5”就行…

中金女员工离世悲剧:职场压力、心理健康与社会支持的深刻反思

中金女员工离世背后的深思 2024年7月1日,一则令人痛心的消息在金融界乃至整个网络迅速传播:中金公司一位年仅30岁的女员工郑某露,在降薪和房贷的双重压力下,不幸离世。这一事件不仅让她的家人和朋友陷入了深深的悲痛之中,也引发了社会各界对职场环境、个体心理健康以及社…

使用块的网络 VGG

一、AlexNet与VGG 1、深度学习追求更深更大&#xff0c;使用VGG将卷积层组合为块 2、VGG块&#xff1a;3*3卷积&#xff08;pad1&#xff0c;n层&#xff0c;m通道&#xff09;、2*2最大池化层 二、VGG架构 1、多个VGG块后接全连接层 2、不同次数的重复块得到不同的架构&a…