Vuex，vue-router和處理頁面重新加載（F5）

我正在使用vue-router和vuex切換我正在構建的單頁應用程序。但這是我的第一個SPA，所以我正在陷入一些新手問題。我有東西工作，我想，我的產品列表和編輯模式，通過/product/list和/product/edit成功路由，然後我發現（意料之中）事情打破了編輯模式，當我重新加載使用F5（或Ctrl鍵的頁面 - F5）。編輯模式取決於在列表模式下設置的狀態，並且在沒有發生重新加載之後。Vuex，vue-router和處理頁面重新加載（F5）

所以我的問題是一個一般的建築。做這種事情的最好方法是什麼？我應該嘗試將Vuex狀態持久化到本地還是會話存儲，以便它能夠在重新加載後生存下來？還是應該確保使用路由URL中的信息（我目前沒有這樣做）能夠重新生成狀態？也就是說，我不應該將網址設置爲/product/list，而應該有/product/list?search=whatever&order=field，以便重新加載時可以再次執行搜索和排序。同樣，而不是/product/edit，我會有/product/edit?id=12345，所以如果頁面被刷新，特定的產品可以再次加載。

我的偏好是將狀態持久保存到localStorage（我不必與沒有存儲的瀏覽器相抗衡）。但是我想知道我是否以錯誤的方式接觸SPA設計，我仍然應該以REST術語思考它，即使它全部在一個頁面內發生。

來源

2017-01-25 John Moore

我應該補充說，它不需要很長時間來解決我的具體問題，使用window.beforeunload將商店的狀態保存到sessionStorage，並在創建商店時測試此SessionStorage的現有值。不過，我仍然懷疑我是否爲未來創造了問題。 –

我已經通過在URL中保存ID並在重新加載時重新獲取數據來處理此問題。當然你可以堅持本地存儲，但當有人將該URL發送給其他用戶時會發生什麼？或書籤它，然後清除他們的瀏覽器緩存？大多數用戶希望能夠回到他們所在的頁面。

來源

2017-02-15 13:15:13 Justin

這是一個公平的觀察。碰巧，在具體的情況下，這些考慮不太可能適用。如果發生這種情況，我會測試不一致的狀態並重定向到/ product/list，但在實踐中不太可能發生。但值得考慮未來。 –

Vuex，vue-router和處理頁面重新加載（F5）

回答

相關問題