在 Vue JS 中，如何在頁面刷新時存儲組件的“數據”（真/假）？

Question

在 Laravel 中使用 Vue Js 我想在用戶刷新頁面時保持打開一個擴展的導航欄（如果他們最初選擇打開它）。

導航欄打開/關閉狀態以 true/false 布爾值存儲在組件的數據中。

由於研究了各種選擇，我對采用哪種方法有點困惑，所以作為菜鳥尋求最好的建議。 理想情況下，有一種簡單的方法可以讓“數據”保留在我的組件中，而不是重新渲染為默認值 false！ 因此我想它需要在本地存儲在用戶的“會話”狀態中，對嗎？

但是我使用什么以及如何使用？

• 會話存儲
• 本地存儲
• Vuex - https://v2.vuejs.org/v2/guide/state-management.html
• 一個插件 - https://github.com/vuejs/vuex
• Laravel 會話 - https://laravel.com/docs/5.5/session

謝謝。

Answer 1

如果您的應用程序很大/越來越復雜，則 Vuex 可以使用這樣的插件。 雖然它有點學習曲線，所以如果你只有幾件事來跟蹤它們的狀態，那么 localstorage 將是一個很好的解決方案。

Localstorage 的優點是易於使用，被廣泛采用，如果您將來需要，它可以很好地與 vuex 等狀態管理系統集成。 該 api 非常簡單，實際上只是getItem和setItem用於常見的簡單用例。 它也會在瀏覽器會話中持續存在。

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Sessionstorage 大致相當於 localstorage，主要區別在於一旦關閉瀏覽器，它就會被擦除。