web-dev-qa-db-ja.com

VueJs 2を使用したグローバルデータ

VueJSは比較的新しく、一部のデータをグローバルに利用可能にする方法については手がかりがありません。 APIエンドポイント、ユーザーデータ、および各コンポーネントがこのデータにアクセスできるAPIから取得した他のデータなどのデータを保存したいと思います。
Vanilla Javascriptだけでこれを保存できることはわかっていますが、VueJSでこれを行う方法があると思います。イベントバスシステムを使用してデータを取得できる場合がありますが、このシステムを自分のニーズにどのように実装できるかわかりません。

誰かがこれで私を助けることができれば、私はそれを感謝します。

javascriptvue.jsvuejs2vue-component
15
StefanJanssen

グローバルデータオブジェクトを作成する

const shared = {
    api: "http://localhost/myApi",
    mySharedMethod(){
        //do shared stuff
    }
}

Vueで公開する必要がある場合、できます。

new Vue({
    data:{
        shared
    }
})

そうでない場合でも、インポートした場合、または同じページで定義されている場合は、Vuesまたはコンポーネント内でアクセスできます。

それは本当にそれと同じくらい簡単です。必要に応じてプロパティとしてsharedを渡すか、グローバルにアクセスできます。

あなたが始めたばかりのとき、本当に複雑になる必要はありません。 Vuexが推奨されることがよくありますが、小規模なプロジェクトでは過剰すぎることもよくあります。後で必要になった場合、追加するのはそれほど難しくありません。state managementでもあり、グローバルデータにアクセスしたいだけのようです。

あなたが空想を得たいなら、それをプラグインにしてください。

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=を作成し、すべてのコンポーネントがそれにアクセスできます。ここに 例 があります。

35
Bert