Vue3在Setup中使用axios请求获取的值方式

目录

• Setup中使用axios请求获取的值
• Vue3+Setup使用知识点

Setup中使用axios请求获取的值

上次我们使用axios给项目搞上了网络请求，从此项目数据不再是静态的。对于后端返回的值如何赋值给data里面的变量并且赋予数据响应式，写此日记记录踩坑过程。

axios返回的项目数据无法通过函数返回值返回，如何获取返回值呢？

<script>
import {  defineComponent, reactive, onMounted, toRefs, ref } from "vue";
import { getProjectDetailAPI } from "@/api/api";
export default defineComponent({
  setup() {
    //这里定义一个结构体，用来保存项目信息
    var Data = reactive({
      projectData: [],
      projectDetailData: [],
    });
    function GetProjectDetail(obj) {
      const pid = obj.pid;
      getProjectDetailAPI({ ProjectID: pid })
        .then((result) => {
          /*Data.projectDetailData这个变量是我们定义的reactive对象
          所以你打印出来他是一个数据代理的实例，并非array(),所以想要把
          获取的报文数据复制到里面，需要使用深拷贝*/
          Data.projectDetailData = JSON.parse(JSON.stringify(result.data));
        })
        .catch((err) => {
          console.log(err);
        });
    }
    //挂载后调用函数获取项目数据
    onMounted(() => {
      GetProjectData();
    });
    return {
      //解构Data结构体，让模板可以直接调用Data里面的对象
      ...toRefs(Data),
    };
  },
});
</script>

Vue3+Setup使用知识点

<script lang="ts" setup>
import {getCoupon} from './request';//request里面包含接口,此处是引入getCoupon这个接口
import { onMounted, reactive, ref, getCurrentInstance, onActivated } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();//获取路由参数
const router = useRouter();//获取路由对象
const emit = defineEmits(['downStep']);//初始化emit调用的方法
const props = defineProps({//初始化prop内部参数
	id:Number,
	leave:{
		type:String,//类型
		default:'一级'//默认参数
	}
});
let name = ref('');//ref初始化普通参数
let obj1 = reactive({//ref初始化复杂对象参数
      name: "老王",
      age: "50",
      test: {
        salary: 3000,
        year: 1,
      },
    });
let obj2 = ref({//ref也可初始化复杂对象参数
      name: "老王",
      age: "50",
      test: {
        salary: 3000,
        year: 1,
      },
    });
//ref与reactive都可初始化复杂对象参数，但是使用上不同
console.log(obj1.name);
console.log(obj2.value.name);
console.log(name.value);//ref使用需要.value,reactive则不用
watch(name, (newVal, oldValue) => {//监听单个基本数据类型(ref)
     console.log(newVal, oldValue);
 });
const getList = async (a)=>{//async函数
	let data = await getCoupon({a});
};
const getBtnClick =()=>{//普通函数
	emit('downStep',1);//对比vue2中的this.$emit
	console.log(props.id);//使用props中的id
}
const back = ()=>{
	//router.push("/aa");//跳转其他页面
	router.push({url:'/aa',query:{name:'测试'}});//带参跳转
	//router.replace("/aa")//
}
onMounted(() => {//页面初始化时只请求一次
 //初始化生命周期，一般初始化参数请求时将获取数据接口写在此处
 let a = route.query.a;//获取跳转页面时传递的参数a
 getList(a);
});
onActivated(() => {//页面每次进入时都请求一次，当使用keep-alive并且每次进入页面都需调用一次时使用
 let a = route.query.a;//获取跳转页面时传递的参数a
 getList(a);
});
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。