在 Vue JS 中,如何在页面刷新时存储组件的"data"(真/假)?



使用带有Laravel的Vue Js,我想在用户刷新页面时保持打开扩展的导航栏(如果他们最初选择打开它(。

导航栏打开/关闭状态以真/假布尔值存储在组件的数据中。

我对采取哪种方法有点困惑,因为已经研究了各种选择,因此请作为菜鸟寻求最佳建议。 理想情况下,有一种简单的方法可以让"数据"保留在我的组件中,而不是将其重新渲染为默认值 false! 因此,我想它需要在本地存储在用户的"会话"状态中,对吗?

但是我该使用什么以及如何使用?

  • 会话存储
  • 本地存储
  • Vuex - https://v2.vuejs.org/v2/guide/state-management.html
  • 插件 - https://github.com/vuejs/vuex
  • 拉维尔会议 - https://laravel.com/docs/5.5/session

谢谢。

Vuex 如果你的应用程序很大/越来越复杂,那么就会使用这样的插件。不过,这是一个学习曲线,所以如果你只有几件事来跟踪它们的状态,那么 localstorage 将是一个很好的解决方案。

本地存储的优点是易于使用,被广泛采用,如果您将来需要,它可以与vuex等状态管理系统很好地集成。该 API 非常简单,实际上只是getItemsetItem常见的简单用例。它也在浏览器会话中持续存在。

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

会话存储大致相当于本地存储,关键区别在于一旦关闭浏览器,它就会被擦除。

最新更新