VueJSでは比較的新しく、一部のデータをグローバルに利用できるようにする方法についてはわかりません。私は、APIのエンドポイント、ユーザーデータ、および各コンポーネントがこのデータにアクセスできるどこかのAPIから取得されるその他のデータのようなデータを保存したいと思います。
私はちょうどバニラJavascriptでこれを保存することができますが、私はVueJSでこれを行う方法があると思います。私はイベントバスシステムを使ってデータを取得することができるかもしれませんが、私のニーズにこのシステムをどのように実装できるか分かりません。VueJsを使用したグローバルデータ2
誰かが私にこれを手伝っていただければ幸いです。
ます場合はグローバルデータオブジェクト
const shared = {
api: "http://localhost/myApi",
mySharedMethod(){
//do shared stuff
}
}
を作るあなたのVueの上でそれを公開する必要がを、あなたがすることができます。
new Vue({
data:{
shared
}
})
インポートした場合や、同じページに定義されている場合は、ビューやコンポーネント内で引き続きアクセスできます。
これは本当に簡単です。共有する必要がある場合や、グローバルにアクセスする場合は、共有としてプロパティを渡すことができます。
あなたが始めているときは、実際に複雑になる必要はありません。 Vuexはしばしば推奨されますが、小規模なプロジェクトでは頻繁に過剰です。後で必要があると分かった場合は、追加するのは難しくありません。の状態管理の場合もあり、実際には一部のグローバルデータへのアクセスが必要なように聞こえます。
ファンシーにしたい場合は、プラグインにしてください。
const shared = {
message: "my global message"
}
shared.install = function(){
Object.defineProperty(Vue.prototype, '$myGlobalStuff', {
get() { return shared }
})
}
Vue.use(shared);
Vue.component("my-fancy-component",{
template: "<div>My Fancy Stuff: {{$myGlobalStuff.message}}</div>"
})
new Vue({
el: "#app"
})
これですべてのVueが作成され、すべてのコンポーネントがそのコンポーネントにアクセスできます。ここにはexampleがあります。
私はすべてのエンドポイントをオブジェクトプロパティとして保存するためにenvironment.jsファイルを使用します。
var urls = {};
urls.getStudent = "api/getStudent/{id}";
etc...
それから私はこれに参照を置くが、私はこれらのエンドポイントにアクセスする必要があるVueJSコードを持っているページ上の文書の頭の中でファイルをenvironment.js。確かにこれを行うには多くの方法があります。
Vuex：[documentation]（http://vuex.vuejs.org/ja/）と呼ばれるVue.js用の状態管理ソリューションがあります。 – wostex