2017-01-20 24 views
5

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

これは、keep-aliveでラップすることができるように見えますが、これは1つの問題を解決しますが、他のものをたくさん紹介します。そのルートは、単にトップレベルのルータビューを使用しています)。 Vue 2.1では、ルータビューにincludeとexcludeのパラメータを導入することで、これに対処するための明確なことが行われました。しかし、私は本当にこれをやりたいとは思わない。なぜなら、私のメインページにキープアライブを使用するべきであるか使用してはいけないルートを宣言しなければならないのは非常に厄介なようだ。私がルートを設定している時点(つまり、ルート配列内)でキープアライブを実行するかどうかを宣言するほうがはるかにうまくいくでしょう。だから私の最善の選択肢は何ですか?

答えて

0

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

これは、次のように動作します。

enter image description here

Vueがsimple state managementを提供していますが、私はVUEのコミュニティの中での状態管理のための規格であるVuexを使用することをお勧めします。

+1

もちろん、2つのコンポーネントの外部にあるストアでは、リストコンポーネントの状態を保存してから、それを '再構成'することができます。しかし、私が保存する必要があるデータはたくさんありますが、実際のコンポーネントデータの一部(たとえば、テーブル内のスクロール位置など)の一部ではありません。私はそれをまったく再レンダリングする必要を避けるためのきれいな方法があることを期待していました。 –

+0

@JohnMooreあなたは解決策を見つけましたか?私は同じ正確な質問をしています。 – andy

+0

私がやったことは、さまざまなビューの間で保存し、Vuexストアに「workingProductData」として保存するために必要な情報を分離することでした。理想的ではありませんが、それはうまくいきます。私が別のプロジェクトで採用したもっと簡単な解決策は、詳細とリストビューを同じコンポーネントの一部として、v-if/v-elseを使って状態の 'editMode'プロパティに応じて切り替えることです。 –

0

私は同様の問題を抱えていましたが、Vuexを見ましたが、プロジェクトに追加するにはコードにあまりにも多くの変更/追加が必要と判断しました。

このライブラリは私の問題を解決し、localStorageと同期した1コンポーネントの状態を保ちました。パッケージのGithubページには数分と数行しかかかりませんでしたが、 。

関連する問題