Vue js中如何全局分配axios？

Question

如何在 Vue js 中全局分配 axios？

我正在尝试加载 Axios，以便可以在任何组件中访问它。

我正在尝试如下：

ma​​in.js

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

home.js

buyers(data) {
    return new Promise(function (resolve, reject) {
        this.$axios.get(`/buyers?${data}`)
            .then(response => {
                resolve(response.data)
            })
            .catch(error => {
                reject(error.response.data)
            })
    })
}

index.vue?6ced:203 Uncaught (in promise) TypeError: Cannot read 未定义的属性“$axios”

Answer 1

我认为您正在寻找这样的东西：

buyers(data) {
  return this.$axios.get(`/buyers?${data}`)
    .then(response => {
      return response.data
    })
    .catch(error => {
      throw error.response.data
    })
  })
}

通常，如果您发现自己使用构造函数创建了一个新的 Promise，那么您可能做错了什么。只有在包装其他不使用 Promises 的代码时才需要这样做。

您看到错误的原因是额外函数更改了this 的值。每次输入新函数时，this 的值都会发生变化。

您也可以通过更改此行来修复它：

return new Promise(function (resolve, reject) {

到这里：

return new Promise((resolve, reject) => {

使用箭头函数将保留周围的this 值，因此它仍然指向组件。

Answer 2

试试这个：

install(vue, opts) {
      vue.prototype.$axios = $axios;
    }

然后Vue.use($axios)如果你想要全局