vue3中如何去请求数据

简介: vue3中如何去请求数据

vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种:

  1. 直接在setup中去获取数据
setup(props) {
    const data = reactive({
      note: [],
    });
    getArticalLatest().then((res) => {
      data.note = res.data.data;
    });
    return {
      ...toRefs(data),
    };
  },
  1. 在onMouted里面请求数据
setup(props) {
    const data = reactive({
      note: [],
    });
    onMounted(() => {
      getArticalLatest().then((res) => {
        data.note = res.data.data;
      });
    });
    return {
      ...toRefs(data),
    };
  },
<script setup name="User">
/*
   onMounted(() => {
    // 角色
      let reas = getRole()
    console.info(reas.data)
    });
*/
  onMounted(async () => {
    // 角色
      let reas = await getRole()
    roleOptions.value = reas.data
    console.info(reas.data)
    });    
</script>


相关文章
|
5天前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
4天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
23 1
|
1天前
|
JavaScript API 开发者
关于vue3中v-model做了哪些升级 ?
【10月更文挑战第1天】
97 59
|
2天前
|
监控 JavaScript 安全
vue3添加pinia
本文介绍了Pinia作为Vue 3的状态管理库的特点,包括其基于Vue 3的Composition API、响应式状态管理、零依赖设计、插件系统、Devtools集成、Tree-shakable特性以及对TypeScript的支持,并详细说明了如何在Vue 3项目中安装和初始化Pinia。
9 0
vue3添加pinia
|
2天前
|
JavaScript
vue3完整教程从入门到精通(新人必学2,搭建项目)
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架,包括使用npm安装Element Plus、在main.js中引入并使用该框架,以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
15 0
vue3完整教程从入门到精通(新人必学2,搭建项目)
|
2天前
|
JavaScript Java CDN
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
本文提供了Vue 3从入门到精通的完整教程,涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
16 0
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
|
2天前
|
存储 资源调度 JavaScript
Vite是什么?怎样使用Vite创建Vue3项目?
Vite是什么?怎样使用Vite创建Vue3项目?
6 0
|
4天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
12 0
|
5天前
|
JavaScript API
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
15 0
|
5月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
69 3