Jedna globalna struktura danych w Vue.js

Question

Buduję aplikację z jedną stroną z Vue.js. Jest to stosunkowo prosta aplikacja, bardziej przypominająca rozbudowany, uznany arkusz kalkulacyjny. Używam vue-router do obsługi różnych widoków aplikacji, niektóre służą do wprowadzania nowych danych, inne służą do wykonywania obliczeń danych, ale wszystkie dane są ze sobą powiązane (dane wprowadzone w widoku nr 1 służą do wprowadzania danych w widoku # 2, a następnie oba są używane do obliczenia czegoś w widoku # 3).

To oznacza, że ​​potrzebuję globalnej struktury danych. Z moich badań wynika, że ​​mam kilka opcji, aby obsłużyć to:

• "prawidłowy" sposób: emitowanie zdarzeń w komponentach i posługiwanie się nimi w rodzicu; który wydaje się nieco nadmiernie skomplikowane dla co chcę osiągnąć
• dostępu zakresu nadrzędnego bezpośrednio w szablonach składowych poprzez $parent.$data
• mojego obecnego rozwiązania, przypisanie danych referencyjnych rodzic do dziecka danych Object

tak:

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

Jednak mój szósty zmysł mówi mi, że to nie jest dobra praktyka.

Jeśli mam rację, jakie są lepsze sposoby osiągnięcia tego: jedna, globalna struktura danych, dostępna ze wszystkich składników?

Answer 1

Co szukasz jest central state management jako docs mówi:

Duże aplikacje mogą rosnąć w złożoności często, ze względu na stan wielu kawałków rozrzuconych po wielu elementów i interakcji między nimi. Aby rozwiązać ten problem, Vue oferuje vuex: naszą własną bibliotekę zarządzania państwem inspirowaną Elm. Nawet integruje się z vue-devtools, zapewniając zerowy dostęp do podróży w czasie.

Można spojrzeć na inne moje odpowiedzi here i here

Vuexstate można odczytać poprzez getters, aktualizowane synchronicznie za pomocą mutations aktualizowany asynchronicznie poprzez actions ze wszystkich składników vue a nawet podzielone na różne modules .