it-swarm.com.de

Komponente ohne Vorlage

Ich habe ein bisschen Code, der einen API-Aufruf an einen Server macht und etwas JSON zurückgibt.

Es gab es als Methode in meiner Komponente, aber da es etwas länger wird, möchte ich es in eine eigene Datei extrahieren

In vuejs was ist die beste Praxis hier.

  • sollte es eine Komponente ohne Vorlage sein? Wie würde das funktionieren?

  • erstelle ich gerade ein es6-Modul?

15
LeBlaireau

Ich würde vorschlagen, hier ein Mixin zu verwenden.

In einer Datei wie myCoolMixin.js definieren Sie Ihre Mixin ...

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

Sie können alles in einem Mixin genau wie eine Komponente definieren. z.B. Datenobjekt, berechnete oder überwachte Eigenschaften usw. Dann fügen Sie einfach das Mixin in Ihre Komponente ein.

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

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

Mehr zu Mixins hier: https://vuejs.org/v2/guide/mixins.html

11
skribe

Mixins funktionieren, oder Sie könnten ein Plugin erstellen. Hier ist das Beispiel für docs:

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

1
DigitalDrifter