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