Vuejs2 使用Vue插件

我不熟悉使用Vue。我正试着把注意力集中在插件上。我坚持使用的是我添加到插件中的组件及其方法：

组件：Rest.vue

...
export default {
  name: 'rest',
  data () {
    return {
    }
  },

  methods: {
      gplFetch: function(query){
    ...
    return ...;
      }
  }
}
...

插件：全局插件

import Rest from ‘@/components/Rest.vue’

export default {

install(Vue, options) {

    Vue.component(Rest.name, Rest)    

    Vue.mixin({
    created() {
      console.log('rest created');
    }
    })

    Vue.prototype.$gplFetch = function(query){

    return <Access Rest component>.gplFetch(query);
    }
  }
}

我一直关注的是如何访问上面代码中的gplFetch：

return <Access Rest component>.gplFetch(query);

return.gplFetch（查询）；

为了使代码正常工作，应

return Rest.methods.gplFetch(query);

但我建议采取另一种方法，创建一个包含

gplFetch

函数的模块（或者一个API模块），并将该方法导入插件和

Rest.vue

组件

gplFetch.js

export function gplFetch(query){
  // do something with query
}

import {gplFetch} from "./gplFetch.js"

export default {

  install(Vue, options) {

    Vue.component(Rest.name, Rest)    

    Vue.mixin({
    created() {
      console.log('rest created');
    }
    })

    Vue.prototype.$gplFetch = function(query){

      return gplFetch(query);
    }
  }
}

Rest.vue

import {gplFetch} from "./gplFetch.js"

export default {
  name: 'rest',
  data () {
    return {
    }
  },
  methods: {
    gplFetch
  }
}

global plugin.js

export function gplFetch(query){
  // do something with query
}

import {gplFetch} from "./gplFetch.js"

export default {

  install(Vue, options) {

    Vue.component(Rest.name, Rest)    

    Vue.mixin({
    created() {
      console.log('rest created');
    }
    })

    Vue.prototype.$gplFetch = function(query){

      return gplFetch(query);
    }
  }
}

---

当然，所有这些都假设

gplFetch

不依赖于

Rest.vue

实例中的任何数据，因为如果它依赖于Rest.vue，那么从一开始就无法从插件中工作。

非常感谢。你给出了一个解决方案，但你也提供了一个我决定采用的更好的解决方案。你太棒了：）