Vue3在Setup中使用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>

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