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


    }

}
相关推荐
Simon_He28 分钟前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊1 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录1 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲2 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃2 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军2 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子2 小时前
Blob 对象及 Base64 转换指南
前端
风铃喵游2 小时前
让大模型调用MCP服务变得超级简单
前端·人工智能
markyankee1012 小时前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
中微子2 小时前
智能前端实践之 shot-word demo
前端