как правильно подключить axios в vue

Question

вот как подключаю его в main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'




Vue.use(VueAxios, axios)

Vue.config.productionTip = false

new Vue({


render: h => h(App),
}).$mount('#app')

вот потом пытаюсь получить

    mounted: function () {
    this.$axios
    .get(
     "http://api.weatherapi.com/v1/current.json?key=ca25b9b9d5494b7b85e150619201710&q=Samara",
    
      )
  
  .then((response) => {
    this.Wether = response;
    console.log(response.data)
  })
  .catch(console.log);
   },

и в консоли выдает ошибку Uncaught TypeError: Cannot set property 'axios' of undefined

Answer 1

В доке приводятся такие примеры запросов:

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

Следовательно, попробуйте заменить this.$axios.get на один из этих трех вариантов, и тогда должно заработать.

Answer 2

1. Чтобы использовать axios во Vue, один из вариантов подключения - это использовать расширение прототипа Vue как:

import axios from 'axios'
Vue.prototype.axios = axios

т.е. main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.prototype.axios = axios

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    {{ info }}
  </div>
</template>

<script>
export default {
  name: 'App',
    data(){
     return {
      info : []
     }
},
mounted(){
this.axios
  .get('https://api.coindesk.com/v1/bpi/currentprice.json')
  .then(response => (this.info = response.data.bpi))
}

}
</script>

2. Если вы хотите использовать vue-axios, тогда нужно позаботиться о версии пакета, как указано в документации. Для вашей, вероятно версии vue 2.* нужно установить соответствующий пакет vue-axios:

npm install --save axios [email protected]

после установки этих пакетов, ваш вышеприведенный код должен работать исправно, только замените this.$axios на this.axios, что следует из документации vue-axios.

БЛОГ НА HUSL

как правильно подключить axios в vue

Ответы (2 шт):