全球數據與VueJs 2

即時通訊相對較新的VueJS，我不知道如何使一些數據全球可用。我想保存API端點，用戶數據和其他一些數據，這些數據是從API中獲取的，每個組件都可以獲取到這些數據。
我知道我可以保存這只是香草Javascript，但我想有一種方法可以做到這一點與VueJS。我可能能夠使用事件總線系統獲取數據，但我不知道如何才能實現這個系統以滿足我的需求。全球數據與VueJs 2

如果有人能幫助我，我將不勝感激。

來源

2017-04-03 StefanJanssen

Vue.js有一個名爲Vuex的狀態管理解決方案：[documentation]（http://vuex.vuejs.org/en/）它完成了你所提到的一切。 – wostex

建立一個全球性的數據對象

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

如果需要暴露在你的Vue，你可以。

new Vue({ 
    data:{ 
     shared 
    } 
})

如果不這樣做，你仍可以在VUES或組件內訪問它，如果你已經導入它或它們在同一頁面上定義。

它的確如此簡單。如果需要，您可以傳遞共享作爲屬性，或者全局訪問它。

當你剛開始時，沒有真正需要變得複雜。 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。

來源

2017-04-03 20:13:58 Bert

這對一個簡單的案例更好，謝謝這個提示。 – wostex

很好的答案！在codepen中，你應該控制'$ myGlobalStuff'而不是'$ store'。 –

@AbhishekJain甚至沒有注意到:)謝謝！ – Bert

我只是使用environment.js文件將所有端點存儲爲對象屬性。

var urls = {}; 
urls.getStudent = "api/getStudent/{id}"; 
etc...

後來我把參照本environment.js文件中的文件在哪裏我都需要訪問這些端點VueJS代碼頁頭。我確定有很多方法可以做到這一點。

來源

2017-04-03 20:15:25 victor

全球數據與VueJs 2

回答

相關問題