当前位置: 首页 > news >正文

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){}}

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 第三十章 方法大全(Python)
  • SpringBoot | 大新闻项目后端(redis优化登录)
  • 第三方商城对接重构(HF202407)
  • 【第20章】MyBatis-Plus逻辑删除支持
  • Linux查看文件的行数,字数,字节数
  • 207 课程表
  • 如何在PD虚拟机中开启系统的嵌套虚拟化功能?pd虚拟机怎么用 Parallels Desktop 19 for Mac
  • Pytorch(笔记7损失函数类型)
  • 1-5题查询 - 高频 SQL 50 题基础版
  • Floyd
  • 如何给gitlab其他访问者创建账号并增加权限
  • Java+Vue实现电商网站
  • Http中get与post的区别,99%的人都理解错了吧
  • 算法题-回文子串和最长回文子序列
  • 使用Python实现深度学习模型:模型解释与可解释人工智能
  • 分享的文章《人生如棋》
  • Akka系列(七):Actor持久化之Akka persistence
  • android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码...
  • Android交互
  • create-react-app做的留言板
  • gulp 教程
  • IDEA 插件开发入门教程
  • IE报vuex requires a Promise polyfill in this browser问题解决
  • java取消线程实例
  • LeetCode18.四数之和 JavaScript
  • linux安装openssl、swoole等扩展的具体步骤
  • orm2 中文文档 3.1 模型属性
  • OSS Web直传 (文件图片)
  • Promise初体验
  • TypeScript迭代器
  • Vim Clutch | 面向脚踏板编程……
  • Xmanager 远程桌面 CentOS 7
  • 对象引论
  • 翻译--Thinking in React
  • 分享几个不错的工具
  • 工作踩坑系列——https访问遇到“已阻止载入混合活动内容”
  • 基于游标的分页接口实现
  • 警报:线上事故之CountDownLatch的威力
  • 实习面试笔记
  • 使用iElevator.js模拟segmentfault的文章标题导航
  • 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
  • ​​​【收录 Hello 算法】10.4 哈希优化策略
  • #DBA杂记1
  • #我与Java虚拟机的故事#连载02:“小蓝”陪伴的日日夜夜
  • (delphi11最新学习资料) Object Pascal 学习笔记---第8章第5节(封闭类和Final方法)
  • (SpringBoot)第二章:Spring创建和使用
  • (编程语言界的丐帮 C#).NET MD5 HASH 哈希 加密 与JAVA 互通
  • (第8天)保姆级 PL/SQL Developer 安装与配置
  • (二)Pytorch快速搭建神经网络模型实现气温预测回归(代码+详细注解)
  • (附源码)springboot教学评价 毕业设计 641310
  • (论文阅读32/100)Flowing convnets for human pose estimation in videos
  • (南京观海微电子)——COF介绍
  • (原创)Stanford Machine Learning (by Andrew NG) --- (week 9) Anomaly DetectionRecommender Systems...
  • (原创)可支持最大高度的NestedScrollView
  • (原創) 如何使用ISO C++讀寫BMP圖檔? (C/C++) (Image Processing)