Vue.js的axios新脚本设置

Question

感谢阅读我的问题。

我正在尝试使用Vue.js 3.2和axios运行新的<script setup>语法(Composition API(。使用正常语法，我的代码看起来像：

<script>
import axios from 'axios'
export default {
name: 'GetRequest',
data () {
return {
infos: null
}
},
mounted () {
axios
.get('https://api.predic8.de/shop/products/')
.then(response => (this.infos = response.data))
}
}
</script>
<template>
<div id="app">
{{ infos }}
</div>
</template>

这很好，但我使用了一个模板(https://github.com/justboil/admin-one-vue-tailwind)对于我的项目，它与新的CCD_ 2一起工作。

我已经找到了一些解决方案，比如：

<script setup>

import {onMounted} from "vue";

const {ref} = require("vue");
const axios = require("axios");
const info = ref([])
onMounted(async () => {
await axios
.get('https://api.predic8.de/shop/products/')
.then(response => {
this.info = response.data

})
})
</script>
<template>
<div id="app">
{{ infos }}
</div>
</template>

但它给了我这个.infs被分配了一个值，但从未使用过。有人知道我如何将值分配给变量并在<template>中调用它吗？

更新：

我用infos.value而不是this.infos找到了解决方案

<script setup>
import {onMounted} from "vue"

const {ref} = require("vue")
const axios = require("axios")
const infos = ref([])
onMounted(async () => {
await axios
.get('https://api.predic8.de/shop/products/')
.then(response => {
infos.value = response.data
})
})
</script>
<template>
<div id="app">
{{ infos }}
</div>
</template>
``` 

Answer 1

最好使用inject在每个组件中导入axios。这样，如果需要的话，你可以创建一些拦截器。。。

首先，您应该为vue.js安装axios插件。

> npm install --save axios vue-axios

安装完成后，只需导入axios，如下所示：

main.js

import { createApp } from "vue";
import axios from "./plugins/axios";
import VueAxios from "vue-axios";
const app = createApp(App);
// Axios Plugin
app.use(VueAxios, axios);
app.provide("axios", app.config.globalProperties.axios);

在任何组件内

import { inject } from "vue";
const axios = inject('axios');
// using axios as usual

注意：我在组件示例中使用了<script setup>。

PS：如果需要使用interceptors，可以在./plugins/axios.js文件中创建axios实例，否则只需在main.js文件中一如既往地导入axios即可！

Answer 2

1. 在您的模板中，您正在访问"infos"；但是声明的变量是"0"；信息">
2. 在你的onMounted回调中，你的赋值应该没有"；这个"；只是"；info＝response.data">

在顶级脚本中声明的任何变量都可以从模板中访问。

更多信息请点击此处https://v3.vuejs.org/api/sfc-script-setup.htm在这里https://v3.vuejs.org/guide/composition-api-setup.html