使用 axios 设置 Vue.js 新脚本

Question

感谢您阅读我的问题。

我正在尝试在运行 Vue.js 3.2 和 axios 的情况下获得新的 <script setup> 语法（组合 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)，它适用于新的 <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 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”，但声明的变量是“info”
2. 在您的 onMounted 回调中，您的分配应该没有“this”，只有“info = response.data”

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

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