web-dev-qa-db-ja.com

Vueルーターでコンポーネントの状態を保持しますか？

リスト/詳細の使用例があります。ユーザーは製品リストのアイテムをダブルクリックし、詳細画面に移動して編集し、完了したらリスト画面に戻ることができます。ここで説明する動的コンポーネントの手法を使用して、これを既に実行しました： https://vuejs.org/v2/guide/components.html#Dynamic-Components 。しかし、アプリケーションの他の場所でvue-routerを使用する予定なので、代わりにルーティングを使用するようにこれをリファクタリングしたいと思います。動的コンポーネントの手法では、キープアライブを使用して、ユーザーがリストビューに戻ったときに、編集前と同じ選択が存在することを確認しました。しかし、ルーティングを使用すると、製品リストコンポーネントが再レンダリングされるように思えますが、これは私が望んでいることではありません。

今、それはルータビューをキープアライブにラップできるように見えます、これは1つの問題を解決しますが、他の多くを紹介します、私はそのルートだけを維持したいので、それらのすべてではありません（そして現在私は単に単一の最上位ルータービュー）。 Vue 2.1は、ルータビューのincludeおよびexcludeパラメータを導入することによって、これに対処するために明らかに何かをしました。しかし、宣言する必要があるのは非常に不格好であるように思われるので、私もこれを本当にしたくありません。メインページの前に、キープアライブを使用する必要があるかどうかを問わず、すべてのルートを指定します。ルートを構成しているポイント（つまり、ルート配列内）でキープアライブを使用するかどうかを宣言する方がずっと簡単です。 。では、私の最善の選択肢は何ですか？

vue.jsvue-router
20
John Moore

次のように、存続させたいルートを指定できます。

<keep-alive include="home">
  <router-view/>
</keep-alive>

この場合、ホームルートのみが維持されます

10
Alex Garcia

私には、ある種の 状態管理 を探しているようです。複数のコンポーネントで共有されているデータがあり、コンポーネントを異なる順序でレンダリングしたいが、各コンポーネントのデータを再度ロードしたくない場合。

これは次のように機能します。

enter image description here

Vueは シンプルな状態管理 を提供していますが、vueコミュニティの間での状態管理の標準である Vuex を使用することをお勧めします。

1
Saurabh

私は同様の問題を抱えてVuexを調べましたが、プロジェクトに追加するにはコードの変更や追加が多すぎると判断しました。

私はこのライブラリを見つけました https://www.npmjs.com/package/vue-save-state これは私のために問題を解決し、1つのコンポーネントの状態をlocalStorageと同期させて維持しました。数分と数行のコード（すべてパッケージのGithubページに記載されています）。

1
user985366