当前位置: 首页 > 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){}}

http://www.lryc.cn/news/391975.html

相关文章:

  • Python酷库之旅-第三方库Pandas(003)
  • 社交电商中的裂变营销利器,二级分销模式,美妆家具成功案例分享
  • 【国产开源可视化引擎Meta2d.js】图层
  • 基于Redisson实现分布式锁
  • Android Studio下载Gradle特别慢,甚至超时,失败。。。解决方法
  • leetcode--二叉树中的最长交错路径
  • c++ primer plus 第15章友,异常和其他:15.1.3 其他友元关系
  • uniapp+vue3页面跳转和传参
  • 硬链接和软链接
  • 属性描述符初探——Vue实现数据劫持的基础
  • 字节也没余粮了?天底下没有永远免费的GPT-4;AI产品用订阅制就不合理!让用户掏钱的N种定价技巧嘿嘿 | ShowMeAI日报
  • 【Matlab 路径优化】基于蚁群算法的XX市旅游景点线路优化系统
  • 我关于Excel使用点滴的笔记
  • 【Java安装】windows10+JDK21+IDEA
  • 《简历宝典》01 - 一文带你学会如何写一份糟糕透顶的简历
  • 多链路聚合通信路由在应急救援活动中的重要性及解决方案
  • PyCharm中如何将某个文件设置为默认运行文件
  • 【杂交版】植物大战僵尸杂交版v2.1最新版本下载链接
  • 图像增强及运算篇之图像掩膜直方图和HS直方图
  • Python商务数据分析知识专栏(六)——Python数据分析的应用④Python数据分析实训
  • 【Python机器学习】处理文本数据——将文本数据表示为词袋
  • 论文写作全攻略:Kimi辅助下的高效学术写作技巧
  • 通证经济重塑经济格局
  • linux - cp 命令
  • 基于Qt实现的PDF阅读、编辑工具
  • Linux 内核 GPIO 用户空间接口
  • Hive数据倾斜--处理方法
  • k8s流控平台apiserver详解
  • unity对于文件夹的操作
  • [Redis]哨兵机制