Vue.js 新脚本设置与 axios

Question

Thanks for reading my question.

I'm trying to get the new <script setup> syntax with Vue.js 3.2 and axios running. With the normal syntax my code looks something like:

<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>

This works just fine, but I use a template ( https://github.com/justboil/admin-one-vue-tailwind ) for my projekt which works with the new <script setup> .

I already found some solutions like:

<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>

but it gives me 'this.infos' is assigned a value but never used . Does anyone know how I can assigne the value to the variabel and call it in the <template> ?

Update:

I found the solution by using infos.value instead of 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

It's better to use inject for importing axios in each component. This way you can create some interceptors if they needed as well...

First you should install the axios plugin for vue.js .

> npm install --save vue-axios

When the installation finished just import the axios like below example:

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);

inside any component

import { inject } from "vue";

const axios = inject('axios');
// using axios as usual

Note: I used the <script setup> inside the component example.

PS: You can create an axios instance inside the ./plugins/axios.js file if you need to use interceptors otherwise just import the axios as always inside main.js file!

Answer 2

1. In your template you are accessing "infos" but the declared variable is "info"
2. In your onMounted callback your assignment should be without "this" just "info = response.data"

Any variable declared at the top level script would be accesible from the template.

More info here https://v3.vuejs.org/api/sfc-script-setup.htm and here https://v3.vuejs.org/guide/composition-api-setup.html