Extracting public methods from VUE

write an ajax request method, which is normal in the component, but it is not normal to extract it into the file of the public method, so report Cannot read property "$http" of undefined. What on earth is going on? I"ve been studying it for a day, but I can"t find a solution. Ask for help

this is the public method (common.js):

(rank.vue):

Vue.js vue-resource vue-router vue-cli node.js

Feb.25,2022

this.$http change to Vue.prototype.$http , don't forget import Vue


import axios from 'axios'
axios.get('url').then((res)=>{
    
 }).catch((err)=>{})

the this of your public method does not refer to an instance of VUE at all. It is a ghost if you this can find $http and store. Do you call your external js package directly without importing the dependencies you need? Your this here points to Request.
import XXXX from 'XXXX'
bring in what you need to reuse.

make up the foundation of js when you have time

The this in

this.$http cannot point to the vue instance.
solution: you can pass the vue instance as a parameter to the request function in, request (this)

function API (prefix) {
  this.prefix = prefix
};

API.prototype.request = function (url, options) {
  url = this.prefix + url
  ... do the request
}

API.install = function (Vue, options) {
  var api = new API(options.prefix)
  Vue.prototype.$api = api
  Vue.api = api
}

const RequestAPI = Request.bind(this)
// RequestAPI
RequestAPI();

Previous: Can Angular2: have multiple < router-outlet > tags and display content on a page at the same time?

Next: Does the number of visits to an article have an impact on Baidu's SEO ranking?