说是状态丢失，这个词用的很好，我最初遇到的时候，网上搜索的是数据丢失，真的弄明白之后，觉得这个用词很重要。
背景
假设正在写一个列表页以及对应的详情页，需求：每一次点击列表中的一项，就将这一项的全部数据存储到vuex，然后通过vue-router跳转到详情页，在详情页的computed中拿到vuex中的数据。一切正常，但是无脑的我按了一下F5，页面从vuex中拿到的数据消失了......
名词解释（非官方）
vuex：一种状态管理模式，集中存储所有需要共享的组件的状态，非持久化。变量提升这个概念被很多网友在这个地方用到，应该可以这样理解。
路由跳转：页面无刷新跳转，页面无重载，这也是为什么第一次一切正常。
F5刷新：重新载入页面，浏览器会销毁之前的所有数据。
原因
F5刷新导致页面重载，之前的数据被清空，页面初始化，vuex最初保存的状态也会被清空，所以后面的数据会消失。确实坑到我了！
解决方案
1.在这样的场景中使用持久化存储：local storage, session storage代替；
2.在vuex中使用storage存一边，在取数据的时候先判断vuex拿到的值是否为空，如果为空就从storage拿（感觉有点多此一举）
3.在详情页再调一次接口，需要的id之类的字段通过路由的query传过来（在能重新发请求的前提下，个人觉得是最优的解决方案）
延申
这个问题让我怀疑vuex对比storage，存在的价值。但是我对于设计vuex、redux这类神器（状态管理工具）的大神深信不疑，所以我再了解了一下。
个人总结：vuex用于组件间的响应式状态共享，可达牵一发而动全身的效果。storage用于页面间的数据持久化存储，适合不同页面做数据共享，不需要实时响应变化。
欢迎指正，欢迎延申
网友评论