Vue.jsの1つのグローバルデータ構造

Question

私はVue.jsを使って1ページのアプリケーションを構築しています。比較的シンプルなアプリで、拡張された意見のついたスプレッドシートに似ています。私はvue-routerを使用してアプリのさまざまなビューを扱いますが、新しいデータの入力に使用されるものもあれば、データの計算を実行するものもありますが、そのデータはすべて絡み合っています（ビュー＃1に入力されたデータは、 ＃2で何かを計算するために使用されます）。

つまり、グローバルデータ構造が必要です。私の研究から、私はそれを扱ういくつかの選択肢があることがわかりました：

• "適切な"方法：コンポーネントでイベントを発生させ、親で処理します。それは私が
• 子データの親データ参照を割り当て、$parent.$data
• 私の現在のソリューションを経由してコンポーネントテンプレート内で直接親スコープへのアクセスがとても同様

オブジェクト達成したいもののために少しovercomplicatedようです：

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

しかし、私の第六感は、それは良い習慣ではないことを私に伝えています。

私が正しいとすれば、これを達成するより良い方法は何ですか？すべてのコンポーネントからアクセスできるグローバルなデータ構造です。

Answer 1

何を探してるんですが、ドキュメントとしてcentral state managementでは言う：

大規模なアプリケーションは、しばしば多くのコンポーネントとそれらの間の相互作用に散在する状態の複数の部分に、複雑に成長することができます。この問題を解決するために、Vueはvuexを提供しています：私たち自身のElmからインスパイアされた状態管理ライブラリ。これはvue-devtoolsに統合されており、タイムトラベルへのゼロ設定アクセスを提供します。

あなたは私の他の回答を見ていることができhereとhere

Vuexstateは、getters介して読み出さmutationsを使用して同期して更新、すべてのVUEのコンポーネントからactionsを経由して非同期で更新しても、異なるmodulesに分けることができます。