Question

我有一些代码对服务器进行api调用并返回一些JSON。

它确实作为我的组件中的方法存在但是因为它有点长，我想将它提取到它自己的文件

在vuejs中，这里的最佳做法是什么。

它应该是没有模板的组件吗？这将如何运作？
我会创建一个es6模块吗？

Answer 1

我建议在这里使用mixin。

在像myCoolMixin.js这样的文件中定义你的mixin ......

export default {
   methods: {
      myAwesomMethod() {
         //do something cool...
      }
   }
}

您可以像组件一样在mixin中定义任何内容。例如数据对象，计算或监视属性等。然后，您只需在组件中包含mixin。

import myCoolMixin from '../path/to/myCoolMixin.js'

export default {
   mixins: [myCoolMixin],
   data: function() {
      return: {
         //... 
      }
    },
    mounted: function() {
       this.myAwesomeMethod(); // Use your method like this!  
    }
 }

有关Mixins的更多信息：https://vuejs.org/v2/guide/mixins.html

Answer 2

Mixins工作，或者你可以创建一个插件。这是文档示例：

MyPlugin.install = function (Vue, options) {
  // 1. add global method or property
  Vue.myGlobalMethod = function () {
    // something logic ...
  }

  // 2. add a global asset
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // something logic ...
    }
    ...
  })

  // 3. inject some component options
  Vue.mixin({
    created: function () {
      // something logic ...
    }
    ...
  })

  // 4. add an instance method
  Vue.prototype.$myMethod = function (methodOptions) {
    // something logic ...
  }
}

Vue Plugins

没有模板的组件

2 个答案: