Vue.js中的一個全局數據結構

我正在用Vue.js構建一個單頁面應用程序。這是一個相對簡單的應用程序，更像是一個擴展的，自以爲是的電子表格。我使用vue-router來處理應用程序的不同視圖，其中一些用於輸入新數據，一些用於對數據執行計算，但所有數據交織在一起（在視圖＃1中輸入的數據用於在視圖中輸入數據＃2，然後兩者都用於計算＃3視圖中的內容）。Vue.js中的一個全局數據結構

這意味着我需要一個全局數據結構。從我的研究中，我發現我有幾個選擇來處理這個問題：

「適當的」方式：在組件中發射事件並在父組件中處理它們;這似乎是有點過於複雜是我想達到
通過$parent.$data
我目前的解決辦法直接訪問的組件模板父範圍，分配父數據參考子數據對象

像這樣：

const REPORTS = { 
    template: templates.reports, 
    data: function(){ 
    return this.$parent.$data 
    } 
};

但是，我的第六感覺告訴我，這不是一個好習慣。

如果我是正確的，什麼是更好的實現方式：一個全局數據結構，可以從所有組件中訪問？

來源

2016-12-25 angr

你所尋找的是一個central state management爲文檔說：

大型應用程序常常可以複雜性的增加，由於多條狀態分散在多個組件和它們之間的相互作用。爲了解決這個問題，Vue提供了vuex：我們自己的受Elm啓發的州管理庫。它甚至集成到vue-devtools中，爲時間旅行提供零設置訪問。

你可以在我的其他答案看看here和here

Vuex state可以通過getters讀取，同步使用mutations更新，通過actions從所有VUE組件異步更新，甚至分成不同modules 。

來源

2016-12-25 06:29:44 Saurabh

謝謝，那就是我一直在尋找的。出於好奇，將父數據引用傳遞給孩子有多糟糕？ – angr

@angr一點都不壞，如果溝通僅限於父母子女，您可以隨時詳細瞭解[這裏]（http://stackoverflow.com/a/40915910/1610034），但如果您需要在使用vuex之後可能會變得凌亂的多個組件之間進行通信。 – Saurabh

Vue.js中的一個全局數據結構

回答

相關問題