Блог

Главная - Вопросы по программированию - Как правильно импортировать Axios в vue 3 после создания нового проекта с помощью CLI?

Как правильно импортировать Axios в vue 3 после создания нового проекта с помощью CLI?

#javascript #vue.js #axios #vuejs3

#javascript #vue.js #axios #vuejs3 #vue-composition-api

Вопрос:

Я создал новый проект, используя:

 vue create hello-world

Создание нового проекта, который включает HelloWorld.vue в себя файлы , app.vue , main.js (etc …).

Теперь я устанавливаю Axios, следуя документации Npm vue-axios:

 npm install --save axios vue-axios

Я импортирую Axios в main.js файл:

 import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

И теперь я сталкиваюсь с проблемой, которую я не понимаю. В VueAxios документах говорится, что вы просто используете его следующим образом:

 const app = Vue.createApp(...)
app.use(VueAxios, axios)

Но способ app создания в Vue 3 отличается. Я думаю, что именно здесь возникает проблема:

 createApp(App).mount('#app')

Итак, как мне правильно импортировать axios?

Ответ №1:

createApp(App).mount('#app') фактически то же самое, что:

 import Vue from 'vue'
const app = Vue.createApp(App)
app.mount('#app')

// or
import { createApp } from 'vue'
const app = createApp(App)
app.mount('#app')

Итак, следуя документам Vue Axios, просто вставьте строку для app.use() :

 import { createApp } from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App)
app.use(VueAxios, axios) // 👈
app.mount('#app')

Вы также можете связать его следующим образом:

 createApp(App).use(VueAxios, axios).mount('#app')

ДЕМОНСТРАЦИЯ

Комментарии:

1. @RizaKhan Технически исходный вопрос не имеет ничего общего с Composition API (и этот тег, вероятно, следует удалить), поэтому я бы не стал обновлять демонстрацию здесь. В любом случае я бы просто импортировал axios там, где это необходимо (в том числе в Composition API), вместо использования vue-axios .

Ответ №2:

Вы могли бы импортировать только axios и определить его как глобальное свойство :

Использование bundler (vue cli, vite или webpack …):

 import { createApp } from 'vue'
import axios from 'axios'
const app = createApp(...)
app.config.globalProperties.axios=axios

затем используйте его в любом дочернем компоненте, например:

Option api :

 this.axios.get(...)

в Composition api я рекомендую импортировать его напрямую, например :

 import axios from 'axios'

const MyComponent = {
  setup() {
    //use axios here

   .... 
  }
}

или вы используете useAxios из vueuse (утилиты составления vue) :

 import { useAxios } from '@vueuse/integrations/useAxios'
...
 setup() {
   const { data, isFinished } = useAxios('/api/posts')
 }

Ответ №3:

Это сработало для меня в VueJS 3.

 npm i vue-axios

import { createApp } from "vue";
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App);
app.use(VueAxios)
app.use(axios)

app.mount("#app");


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

Ссылка на документ:
https://www.npmjs.com/package/vue-axios