サーバーとvuexの状態を同期させるための推奨戦略

Question

この単純なケースを改めてください。ユーザーはタスクのリストを作成して並べ替えることができるVue JSアプリケーションがあります。これらのリストは、サーバーによってデータベースに格納される必要があります。大量のUXを実行するListComponentがあるとしましょう。

私の質問は、私は、フロントエンドとバックエンドのデータ同期を処理するために使用すべきパターン、ありますか？

A）vuexを経由してください：vuex storeにアクティブなリスト（表示、編集、作成されているもの）を保存してください。 ListComponentはstoreとをに変更すると、リストの変更はAPIを介してバックエンドに送信されます。

B）：リストが表示、編集、または作成されるたびにListComponentから直接読み書きします。

アーキテクチャは店舗を持たなければならないAを、以下の場合は？いつ、どのように同期する必要がありますか？何が変わったのか、何が変わっていないのかを把握するにはどうすればいいですか？

Answer 1

どちらの場合も、使用例に応じて正しくなる可能性があります。私が現在作成しているアプリケーションは、両方を使用します。

使用する場合B：サーバーに直接移動 データを保存することが非常に重要である場合は、Bを使用します。この場合、サーバーに直接アクセスして応答を提供して、DBにコミットされたことを確認することができます。このプロセスを管理者タイプの変更に使用します。サーバーの応答後にVuexを更新し、Vuexを使用してデータを提供することもできます。

A：Go Through Vuex サーバーの待機がないため、より高速な操作が必要な場合は、Aを使用します。実際に保存する前に楽観的に変更を表示しても問題ありません。もう一つの利点は、Vuex to localStorageを同期させることです。ビューをカスタマイズするために使用されるユーザー設定にこれを使用します。そのページを遅くして、それらを取得するのを待つ経験がない。

A：Go through Vuex これを行うにはいくつかの方法があります。ここでは一つのパターンです：

1. 派遣Vuexコンポーネントからアクション1
2. 状態を更新するアクションからVuex変異がコミット - あなたはそれが
3. 派遣別Vuex作用を介して行こうと想定しているとして、これは楽観アップデートですアクション1から2 - これは、それ以外の場合は、すべてのアクションに行くことができる1
4. アクション2は、約束の復帰時にサーバー
5. にデータを送信し、アクション2はVuex状態
を更新するために突然変異をコミットし、あなたが複数のアクションで、このアクションを再利用しますと仮定し
6. 変異が不一致（またはエラー）を処理する必要がある

あなたはそれので、まったくVuexを使用する必要がある場合は、コストをカウントするのは良いがあなたのコメントが示すようVuex

のコストを数えますオーバーヘッドや複雑さが増します。理想的なのは、あるタイプのデータ（「リスト」など）とのすべてのやりとりを含むような方法でコンポーネントを書くことで、Vuexで状態を共有する必要がないことです。