Vuejs에서 Axios 메서드 글로벌 가져오기

Vuejs에서 Axios 메서드 글로벌 가져오기

이 파일은 ~/plugins/syslogs.filename 파일입니다.

import axios from 'axios'

let api = axios.create({
  baseURL: 'http://localhost:8000/api/v1/'
})

export default api

모든 컴포넌트에 Axios를 사용하려면 다음 행을 작성해야 합니다.

import api from '~/plugins/axios

어떻게 하면 글로벌하게 구성할 수 있을까요? 대신 $api를 쓸 수 있을까요?

플러그인을 생성하여 다음과 같이 사용할 수 있습니다.main.js파일(vue-cli와 같은 것을 사용하는 경우)

import axios from 'axios'

Vue.use({
    install (Vue) {
    Vue.prototype.$api = axios.create({
      baseURL: 'http://localhost:8000/api/'
    })
  }
})

new Vue({
    // your app here
})

이제 할 수 있다this.$api.get(...)모든 컴포넌트 방법으로

Vue 플러그인에 대한 자세한 내용은 https://vuejs.org/v2/guide/plugins.html를 참조하십시오.

제공/인젝트도 옵션입니다.https://vuejs.org/v2/api/ #syslog-syslog

브라우저에 사용할 수 있는 창 개체가 있습니다.요건에 따라 이를 적극적으로 활용할 수 있습니다.

main.js 파일

import axiosApi from 'axios';

const axios = axiosApi.create({
    baseURL:`your_base_url`,
    headers:{ header:value }
});

//Use the window object to make it available globally.
window.axios = axios;

이제 컴포넌트에 들어갑니다.표시하다

methods:{
    someMethod(){
        axios.get('/endpoint').then(res => {}).catch(err => {});
    }
}

이것이 기본적으로 제 프로젝트에서 악리를 글로벌하게 사용하는 방법입니다.또한, 이것은 라라벨이 그것을 사용하는 방법입니다.

이것을 보관하다main.jsVue 3에서는 완벽하게 동작합니다.

import { createApp } from 'vue';
import App from './App.vue';
import axios from "axios";

const app = createApp(App);

const instance = axios.create({
    baseURL: 'https://example.com/',
  });

app.config.globalProperties.axios=instance

app.mount('#app');

어떤 컴포넌트에서도 사용할 수 있습니다.

this.axios.post('/helloworld', {
    name: this.name,
    age: this.age
})

언급URL : https://stackoverflow.com/questions/50370939/import-axios-method-globally-in-vuejs