web-dev-qa-db-ja.com

テンプレートなしのコンポーネント

サーバーへのAPI呼び出しを行い、JSONを返すコードが少しあります。

それは私のコンポーネントのメソッドとして存在していましたが、少し長くなっているので、それを独自のファイルに抽出したいです

Vuejsでは、ここでのベストプラクティスは何ですか。

  • テンプレートのないコンポーネントである必要がありますか？これはどのように機能しますか？

  • es6モジュールを作成するだけですか？

modulevuejs2componentsstructure
15
LeBlaireau

ここでミックスインを使用することをお勧めします。

MyCoolMixin.jsのようなファイルでミックスインを定義します...

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

コンポーネントと同じように、ミックスインで何でも定義できます。例えばデータオブジェクト、計算または監視されたプロパティなど。その後、コンポーネントにミックスインを含めるだけです。

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

11
skribe

ミックスインが機能するか、プラグインを作成できます。ドキュメントの例を次に示します。

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プラグイン

1
DigitalDrifter