如何从Nuxt 2 Axios迁移到Nuxt3中使用
如何从Nuxt 2 Axios迁移到Nuxt3中使用
提问于 2022-06-19 13:55:02
我正在尝试将一个小项目从Nuxt2迁移到Nuxt3。在Nuxt2中，我使用axios进行API调用。现在我想引入nuxt3，但是Axios在这里不起作用。
如何将此代码迁移到Nuxt3中的usefetch方法。
，这就是我在nuxt2中所拥有的
<script>
import axios from "axios";
export default {
data() {
return {
allDestinations: [],
allSubDestinations: [],
allTours: [],
form: "",
};
},
async asyncData({ route }) {
let { data: countrydata } = await axios.get(
`${process.env.backendapi}/dests/getcountry/${route.query.countryid}`
);
let { data: allDest } = await axios.get(
`${process.env.backendapi}/dests/getmaindests?limit=5000`
);
let { data: allSubDest } = await axios.get(
`${process.env.backendapi}/dests/getsubdests?limit=5000`
);
let { data: alltours } = await axios.get(
`${process.env.backendapi}/tours/gettours?limit=10000`
);
return {
form: countrydata,
allDestinations: allDest.results,
allSubDestinations: allSubDest.results,
allTours: alltours.results,
};
},
};
</script>回答 1
Stack Overflow用户
回答已采纳
发布于 2022-06-19 16:53:18
与Nuxt3would中的相同之处如下。
.env
NUXT_PUBLIC_TEST_URL="https://jsonplaceholder.typicode.com"nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
runtimeConfig: {
public: {
testUrl: '', // fallback empty string, must be present tho
},
},
})在任何一页中使用这个
<template>
<section>
<div>{{ todo.title }}</div>
<div>{{ user.email }}</div>
<div>{{ photos }}</div>
</section>
</template>
<script setup>
const { testUrl } = useRuntimeConfig()
const route = useRoute() // let's suppose that `countryid` equals 1
const { data: todo } = await useFetch(`${testUrl}/todos/1`)
const { data: user } = await useFetch(`${testUrl}/users/${route.query.countryid}`)
const { data: photos } = await useFetch(`${testUrl}/photos/`)
</script>有关数据获取的更多详细信息，请在这里找到：https://v3.nuxtjs.org/guide/features/data-fetching
但总的来说，useFetch正在阻止并执行您的期望。
如果您不能使用script setup，您需要像这样编写它：https://v3.nuxtjs.org/guide/features/data-fetching#using-async-setup
以下是有关env变量的文档：https://v3.nuxtjs.org/guide/features/runtime-config#environment-variables
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72677443
复制相关文章
相似问题
腾讯云开发者
