感謝您閱讀我的問題。
我正在嘗試通過<script setup>運行 Vue.js 3.2 和 axios 來獲得新語法。使用正常語法，我的代碼看起來像：
<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），它適用于新的<script setup>.
我已經找到了一些解決方案，例如：
<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>
但它給了我'this.infos'被分配了一個值但從未使用過。有誰知道我如何將值分配給變數并在中呼叫它<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
})
})
</script>
<template>
<div id="app">
{{ infos }}
</div>
</template>
```
uj5u.com熱心網友回復：
最好用于在每個組件inject中匯入。axios這樣，您也可以在需要時創建一些攔截器...
首先，您應該為vue.js.
> 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：如果您需要使用，您可以在檔案中創建一個axios實體，否則只需匯入一如既往的內部檔案！./plugins/axios.jsinterceptorsaxiosmain.js
uj5u.com熱心網友回復：
- 在您的模板中，您正在訪問“infos”，但宣告的變數是“info”
- 在您的 onMounted 回呼中，您的分配應該沒有“this”只是“info = response.data”
在頂層腳本中宣告的任何變數都可以從模板中訪問。
更多資訊在這里https://v3.vuejs.org/api/sfc-script-setup.htm和這里 https://v3.vuejs.org/guide/composition-api-setup.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/421459.html
標籤：
上一篇：將@microsoft/fetch-event-source用于服務器發送事件時，Vuedata()在事件中不可用
下一篇：C#、socket通信（外接）