[Vue] SSR 环境 Storage 与 Vuex 的关系
Storage 是数据的落地,如果你想在页面刷新后,能重新载入一些必要信息,那么这些信息必然需要存储于 Storage。
Vuex 是单页应用的全局数据集,组件之间可以共享这些数据,数据并不落地。结合计算属性特性,Vuex 做到了全局的数据绑定。
两者场景完全不同,但是前端调用关系一般是 Local computed variable -> Vuex attribute -> WebStorage.
Storage 类型有三种,Local、Session、Memory,其中前两个都无法在 SSR Server 环境使用,只能在客户端。
那么在 SSR 预渲染过程中,Local Storage 就无法获取到客户端的值。
如果依赖本地值做些处理,建议在 mouned 周期进行 Vuex store 的初始化,将 Storage 的操作放在客户端。
此外还是保持 Vuex store 的纯粹性, 不掺杂存储逻辑,仅在必要的 setter 中做一些轻量的 Storage 操作。
Vuex Store docs:vuex.vuejs.org
Vuex in Quasar:quasar.dev/quasar-cli/cli-documentation/vuex-store
Lifecycle Hooks:ssr.vuejs.org/guide/universal.html#component-lifecycle-hooks