Vuejsインスタンスから宣言された関数を呼び出す方法は？

Question

これは私の質問を説明する擬似コードです。スクリプトを実行すると、func1が定義されていないというエラーが発生します。これについてどうすればいいですか？

app.js

require ('./helper'); 
new Vue ({ 
el: "#app", 

created: function() { 
func1() 
} 
}); 

helper.js

module.exports = function() { 
    $.notify('Hi', { 
    position: "bottom right", 
    className: "success" 
    }); 
}; 

事前に感謝します！

Answer 1

インポートされた関数をapp.jsファイルの変数に保存する必要がある場合があります。どのバンドラを使用するかによって異なります（browserifyやwebpackなど）。あなたはVueのに渡しているパラメータオブジェクトの外で宣言された関数にアクセスする必要があります：あなたのhelpers.jsで

// app.js 
var func1 = require('./helper'); 
new Vue ({ 
    el: "#app", 

    created: function() { 
     func1(); 
    } 
}); 

、あなたはjQueryのへの参照が必要です。ライブラリ（jQueryおよび$は、windowオブジェクトにグローバルで使用可能）を含めるか、下の例のようにhttps://www.npmjs.com/package/jqueryからインストールし、独自のコードでバンドルします。

// helper.js 
var $ = require('jquery'); 

module.exports = function() { 
    $.notify('Hi', { 
     position: "bottom right", 
     className: "success" 
    }); 
}; 

Answer 2

この機能を複数のコンポーネントで作成したメソッドで呼び出す場合は、mixinを作成して特定のコンポーネントに渡すことができます。

//YourMixin.js 
new Vue({ 
    created: function() { ... } 
}) 

//Component 
let mixin = require('YourMixin') 

new Vue({ 
    mixins: [mixin], 
    ... 
})