web-dev-qa-db-ja.com

VuejsでAxiosメソッドをグローバルにインポートする

これは私の〜/ plugins/axios.jsファイルです：

import axios from 'axios'

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

export default api

すべてのコンポーネントでaxiosを使用する場合、次の行を作成する必要があります。

import api from '~/plugins/axios

どうすればグローバルに設定できますか？代わりに$ apiを書くだけですか？

vue.jsvuejs2axios
6
KitKit

プラグインを作成し、_main.js_ファイルでこのように使用できます（vue-cliなどを使用している場合）

_import axios from 'axios'

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

new Vue({
    // your app here
})
_

これで、すべてのコンポーネントメソッドでthis.$api.get(...)を実行できます

Vueプラグインの詳細： https://vuejs.org/v2/guide/plugins.html

Provide/Injectもオプションになります。 https://vuejs.org/v2/api/#provide-inject

19
Frondor

ブラウザで使用できるウィンドウオブジェクトがあります。要件に基づいて積極的に活用できます。

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;

今あなたのcomponent.vueで

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

これは基本的に、プロジェクトでaxiosをグローバルに使用する方法です。また、これはLaravelの方法です

1
Viral Patel