Vue.js 新腳本設置與 axios

Question

感謝您閱讀我的問題。

我正在嘗試使用 Vue.js 3.2 和 axios 運行新的<script setup>語法。 使用正常語法，我的代碼看起來像：

<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.data
    })
})
</script>
<template>
  <div id="app">
    {{ infos }}
  </div>
</template>
``` 

Answer 1

最好使用inject在每個組件中導入axios 。 這樣，您也可以在需要時創建一些攔截器...

首先，您應該為vue.js安裝 axios 插件。

> npm install --save 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”，但聲明的變量是“info”
2. 在您的 onMounted 回調中，您的分配應該沒有“this”只是“info = response.data”

在頂層腳本中聲明的任何變量都可以從模板中訪問。

更多信息在這里https://v3.vuejs.org/api/sfc-script-setup.htm和這里https://v3.vuejs.org/guide/composition-api-setup.ZFC356FDC70D28C7AEZ86D