50+Vue经典面试题源码级详解(49):页面刷新后vuex的state数据丢失怎么解决?
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第26天,点击查看活动详情
前言
小伙伴们好,这是村长《Vue经典面试题源码级详解》系列文章第 49 题,前面已完成题目合集在此: 历时一个月,2.6W字!50+Vue经典面试题源码级详解,你值得收藏!
学习群
我组织了一个面试学习群,关注村长公众号村长学前端
,回复“加群”,大家一起卷~
相关学习资源
本系列有配套视频
,思维导图
和开源项目
,大家学习同时千万不要忘了三连
+ 关注
+ 分享
,有道是喝水不忘挖井人~
- 视频教程:56道经典Vue面试题详解
- 思维导图:Vue面试专题
- 配套代码:vue-interview
页面刷新后vuex的state数据丢失怎么解决?
分析
这是一道应用题目,很容易想到使用localStorage
或数据库存储并还原状态。
但是如何优雅编写代码还是能体现认知水平。
体验
可以从localStorage
中获取作为状态初始值:
js
const store = createStore({
state () {
return {
count: localStorage.getItem('count')
}
}
})
业务代码中,提交修改状态同时保存最新值:虽说实现了,但是每次还要手动刷新localStorage不太优雅
js
store.commit('increment')
localStorage.setItem('count', store.state.count)
思路
- 问题描述
- 解决方法
- 谈个人理解
- 三方库原理探讨
回答范例
- vuex只是在内存保存状态,刷新之后就会丢失,如果要持久化就要存起来。
- localStorage就很合适,提交mutation的时候同时存入localStorage,store中把值取出作为state的初始值即可。
- 这里有两个问题,不是所有状态都需要持久化;如果需要保存的状态很多,编写的代码就不够优雅,每个提交的地方都要单独做保存处理。这里就可以利用vuex提供的subscribe方法做一个统一的处理。甚至可以封装一个vuex插件以便复用。
- 类似的插件有vuex-persist、vuex-persistedstate,内部的实现就是通过订阅mutation变化做统一处理,通过插件的选项控制哪些需要持久化
知其所以然
可以看一下vuex-persist内部确实是利用subscribe实现的
http://github.com/championswimmer/vuex-persist/blob/master/src/index.ts#L277
「其他文章」
- 又一个月,1.5W字!50 Vue经典面试题源码级详解,完结篇!
- 50 Vue经典面试题源码级详解(52):vue-router中如何保护路由?
- 50 Vue经典面试题源码级详解(51):Composition API 与 Options API 有什么不同
- 50 Vue经典面试题源码级详解(50):你觉得vuex有什么缺点?
- 50 Vue经典面试题源码级详解(48):在什么场景下会用到嵌套路由?
- 50 Vue经典面试题源码级详解(49):页面刷新后vuex的state数据丢失怎么解决?
- 50 Vue经典面试题源码级详解(46):Vue3.0里为什么要用 Proxy 替代 defineProperty
- 50 Vue经典面试题源码级详解(47):History模式和Hash模式有何区别?
- 50 Vue经典面试题源码级详解(45):Vue3在哪些方面做了优化?
- 50 Vue经典面试题源码级详解(44)
- 50 Vue经典面试题源码级详解(41)
- 50 Vue经典面试题源码级详解(40)
- 50 Vue经典面试题源码级详解(36)
- 50 Vue经典面试题源码级详解(35)
- 50 Vue经典面试题源码级详解(34)
- 50 Vue经典面试题源码级详解(33)
- 50 Vue经典面试题源码级详解(32)
- 50 Vue经典面试题源码级详解(27)
- 50 Vue经典面试题源码级详解(30)
- 50 Vue经典面试题源码级详解(29)