[Vue] SSR 环境 Storage 与 Vuex 的关系

通过llama.cpp与羊驼聊天的网页界面- 详解 Serge 的启动使用

 

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

Link:https://www.cnblogs.com/farwish/p/11902299.html

posted on 2019-11-21 03:01  ercom  阅读(353)  评论(0编辑  收藏  举报