在 vue-electron 中按下后退按钮保存状态

Question

我想在 vue-electron 中制作一个桌面应用程序。我对 vue.js 和电子都是新手。 我在管理状态时遇到了一些问题。

当我点击登录按钮 https://cloudup.com/cFl9MTY6cnn 时，我将数据（即 sessionId 和用户名）发送到下一个屏幕 https://cloudup.com/c76fmL8OGbF 并在此屏幕上显示这些道具 https://cloudup.com/csahnc6Z04J 使用此代码 https://cloudup.com/cdR0F6Qyt-3 但当我进入第三个屏幕时https://cloudup.com/c0F1ztX8qu3 然后回来然后这个数据就消失了 https://cloudup.com/cTFW32DxeRa

我将使用 router.go(-1) https://cloudup.com/cvpxk4GsIRx 返回第二个屏幕

vue-router 文档https://router.vuejs.org/en/essentials/navigation.html 说 “router.push 方法将一个新条目推送到历史堆栈中，因此当用户单击浏览器后退按钮时，他们将被带到上一个 URL。” 和 router.go(n) “此方法采用单个整数作为参数，指示在历史堆栈中前进或后退的步数”

但是，就我而言，当我返回历史堆栈时，会再次调用生命周期挂钩。这是否意味着当我们来到上一页时，该组件会再次创建并且不会从堆栈中弹出。我实际上不想在返回按钮上刷新/重新加载页面。

Answer 1

您也需要将数据发送到第三个屏幕。

代替

<route-link to="third_screen"></router-link>

你需要写，

<router-link :to="{ path: 'third_screen', params: { session_id: this.session_id, userName:this.user_name}}">User</router-link>

您需要使用 router.push() 方法将数据作为参数再次发送到您的第二个屏幕，而不是 router.go(-1)。

但我不会建议上述方法，因为您需要将相同的数据作为参数传递给所有路由。

你也应该看看Vuex。

Vuex 是 Vue.js 应用程序的状态管理模式 + 库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式发生变化。

您应该将会话 ID 存储为 cookie，而不是将其作为道具传递。

更新

也可以看看<keep-alive></keep-alive>。

Reference