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


    }

}
相关推荐
东风西巷3 分钟前
Atlantis Word Processor:全方位的文字处理专家
前端·学习·word·软件需求
今天不要写bug15 分钟前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
上优17 分钟前
Vue3纯前端同源跨窗口通信移动AGV小车
前端·vue.js·状态模式
h_k1008618 分钟前
Chrome 插件开发入门技术文章大纲
前端·chrome
一只小阿乐18 分钟前
vue-router 的实现原理
前端·javascript·vue.js·路由·vue-router
小圣贤君18 分钟前
小说写作中的时间轴管理:基于 Vue 3 的事序图技术实现
vue.js·electron·写作·甘特图·时间轴·事序图
Zz_waiting.19 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
writeone20 分钟前
9-10关于JS初学产生的问题
开发语言·javascript·ecmascript
一只小风华~23 分钟前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架
dy17174 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js