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 any
         if(r.code == 200){
            this.code = r.data
            console.log(this.code,'this.code1')
         }
         console.log(this.code,'this.code2')
         
        },
        //登陆用户
        async reqUserLogin(value:object){
          const r = await reqUserLogin(value)
          this.userInfo = r.data
          
          localStorage.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.code
    flag.value = true;
      }else{
        return
     
      }

    }catch(error){


    }

}
相关推荐
gnip4 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫5 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel6 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼6 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手10 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法10 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku10 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode10 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu10 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu10 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript