Question

我通过Vue UI依赖项安装将Axios添加到了我的Vue应用程序中。我想通过使用

来访问组件中的Axios

this.$http.myHTTPmethod

所以我根据此文档创建了 http.js

https://github.com/axios/axios#axioscreateconfig

import axios from "axios";

const devInstance = createInstance("http://localhost:3000");
const productionInstance = createInstance("http://localhost:3000"); // will change later

function createInstance(baseURL){
    return axios.create({
        baseURL,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.token}`
        }
    });
}

export default devInstance; // Check debug/build mode

我的问题：

如何使axios使用此axios实例？以及如何像使用Vue-Router（this.$http）一样通过this.$router访问此实例？

Answer 1

您可以制作一个插件：

import axios from "axios";
import Vue from 'vue'

const devInstance = createInstance("http://localhost:3000");
const productionInstance = createInstance("http://localhost:3000"); // will change later

function createInstance(baseURL){
    return axios.create({
        baseURL,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.token}`
        }
    });
}

export default {
    install () {
        Vue.prototype.$http = devInstance
    }
}; // Check debug/build mode

然后将您的插件插入main.js文件中，然后像下面这样创建您的主要Vue实例：

import Vue from 'vue'
import http from './plugins/http.js'

Vue.use(http)
...

这样做，您将可以使用axios从组件访问this.$http实例

创建全局Axios配置并将其添加到Vue实例

1 个答案: