在vue3的setup中直接使用axios进行get请求并且传参请求
时间: 2024-04-29 11:23:50 浏览: 9
在Vue 3的setup函数中,可以直接使用axios进行get请求并传递参数。具体步骤如下:
1. 首先,需要安装axios依赖包。可以使用npm或yarn进行安装。例如,使用npm安装:
```
npm install axios
```
2. 在组件的setup函数中导入axios:
```
import axios from 'axios';
```
3. 在setup函数中定义一个函数,用于发送get请求并传递参数:
```
const fetchData = async (param) => {
const response = await axios.get('http://example.com/api/data', {
params: {
param: param
}
});
return response.data;
}
```
4. 在模板中使用fetchData函数:
```
<template>
<div>
<button @click="getData">Get Data</button>
<ul>
<li v-for="item in data" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
setup() {
const fetchData = async (param) => {
const response = await axios.get('http://example.com/api/data', {
params: {
param: param
}
});
return response.data;
}
const getData = async () => {
const data = await fetchData('param1');
console.log(data);
}
return {
getData,
data: []
}
},
mounted() {
this.getData();
}
}
</script>
```
在上面的例子中,我们定义了一个fetchData函数来发送get请求并传递参数。然后,在模板中使用getData函数来调用fetchData函数并更新data数组。注意,我们使用了async/await来处理异步请求。