最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Vue.js new script setup with axios - Stack Overflow

programmeradmin1浏览0评论

Thanks for reading my question.

I'm trying to get the new <script setup> syntax (Composition API) 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('/')
      .then(response => (this.infos = response.data))
  }
}
</script>
<template>
  <div id="app">
    {{ infos }}
  </div>
</template>

This works just fine, but I use a template () 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('/')
      .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('/')
    .then(response => {
      infos.value = response.data
    })
})
</script>
<template>
  <div id="app">
    {{ infos }}
  </div>
</template>
``` 

Thanks for reading my question.

I'm trying to get the new <script setup> syntax (Composition API) 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./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>
``` 
Share Improve this question edited Jul 21, 2022 at 10:33 Taraman asked Jan 25, 2022 at 22:17 TaramanTaraman 3153 silver badges9 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

It's better to use inject for importing axios in each ponent. 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 axios 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 ponent

import { inject } from "vue";

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

Note: I used the <script setup> inside the ponent 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!

  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/api/sfc-script-setup.htm and here https://v3.vuejs/guide/position-api-setup.html

发布评论

评论列表(0)

  1. 暂无评论