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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易知道(ezd.cc)。
