ミックスインをVuejsで使用する

Question

現在、Vuejsでアプリケーションを開発する方法を学習しています。私はVue.jsを設定するためのコードを持つmain.jsファイルを持っています。新しいファイルapi.jsで新しいディレクトリ/ mixinsを作成しました。 mixinとして使用して、すべてのコンポーネントがAPIを使用してAPIにアクセスできるようにします。しかし、私はそれを行う方法を知らない。

これは私の/mixins/api.jsファイルです：すべてのコンポーネントがcallapi()へのアクセス権を持つように私は今、私のミックスイン正しい方法を含めることができますどのように

import Vue from 'vue'; 
import VueRouter from 'vue-router'; 
import VueResource from 'vue-resource'; 

import { configRouter } from './routeconfig'; 

import CallAPI from './mixins/api.js'; 

// Register to vue 
Vue.use(VueResource); 
Vue.use(VueRouter); 


// Create Router 
const router = new VueRouter({ 
    history: true, 
    saveScrollPosition: true, 
}); 

// Configure router 
configRouter(router); 


// Go! 
const App = Vue.extend(
    require('./components/app.vue') 
); 

router.start(App, '#app'); 

、：これは私のmain.jsファイルが

export default{ 
    callapi() { 
    alert('code to call an api'); 
    }, 
}; 

です関数？

Answer 1

documentationあなたは慎重にそれを使用する必要があります状態としてあなたはVue.mixin

api.js 
------ 

export default { 
    methods: { 
    callapi() {}; 
    } 
} 

main.js 
------- 

import CallAPI from './mixins/api.js'; 

Vue.mixin(CallAPI) 

を使用してグローバルミックスインを適用することができます。まばらに、慎重に

使用グローバルミックスインを、それが作成したすべての単一のVueのインスタンスに影響を与えるため、サードパーティのコンポーネントを含む

Answer 2

あなたは特定コンポーネントのミックスインではなく、すべてのコンポーネントを使用したい場合は、このようにそれを行うことができます。

mixin.js

export default { 
    methods: { 
    myMethod() { .. } 
    } 
} 

コンポーネント.vue

import mixin from 'mixin'; 

export default { 
    mixins: [ mixin ] 
} 

もう1つのことは、コンポーネント拡張デザインパターンを使用することです。つまり、基本コンポーネントを作成してから、それをサブコンポーネントに継承します。もう少し複雑ですが、多くのコンポーネントが多くのオプションを共有している場合や、おそらくテンプレートを継承している場合は、コードDRYを保持します。

あなたが興味を持っている場合は、on my blogと書いてあります。