2017-01-25 6 views
1

私は構築しているアプリケーションを、vue-routerとvuexを使用して単一ページのアプリケーションに切り替える作業を進めています。しかしこれは私の最初のSPAなので、私はいくつかの初心者の問題に惑わされています。 /product/list/product/edit経由で正常にルーティングされていて、F5(またはCtrl)を使用してページを再読み込みしたときに編集モードが壊れていることが判明しました。-F5)。編集モードは、リストモードで設定された状態に依存し、リロード後にはこれは発生していません。Vuex、vue-router and handling page reload(F5)

私の質問は、一般的な、建築的なものです。このようなことをする最善の方法は何ですか? Vuexの状態をローカルまたはセッションのストレージに保存して、リロードできるようにする必要がありますか?または、ルートURLの情報を使用して状態を再生成できることを確認する必要がありますか?つまり、URLを/product/listにするのではなく、/product/list?search=whatever&order=fieldにする必要があります。その結果、リロード時に検索と並べ替えを再度実行できるようになります。同様に、/product/editの代わりに/product/edit?id=12345があるので、ページが更新された場合、特定の製品が再度読み込まれる可能性があります。

私の好みは、localStorageに状態を保持することです(私はストレージを持たないブラウザとは争う必要はありません)。しかし、私は間違った方法でSPAの設計に近づいているのかどうか、私はまだそれが1ページ内で起こっていても、RESTという言葉で考えていなければなりません。

+0

window.beforeunloadを使用してストアの状態をsessionStorageに保持し、ストアを作成するときにこのsessionStorageの既存のものをテストするのに時間がかかりませんでした。私はまだ私が将来のために問題を作り出しているかどうか疑問に思います。 –

答えて

1

私はURLにIDを保持し、リロード時にデータを再取得することでこれを処理しました。もちろんローカルストレージに保存することはできますが、そのURLを別のユーザーに送信するとどうなりますか?ブックマークしてブラウザのキャッシュをクリアしますか?ほとんどのユーザーは、そのページに戻ることができると期待しています。

+0

それは公正な観察です。それが起こるにつれて、これはそうした特定の状況において、それらの考慮事項は適用されない可能性があります。私は矛盾した状態をテストし、/ product/listにリダイレクトする場合はそれを実行しますが、実際には起こりそうにありません。しかし、将来を考える価値がある。 –