Vuex遇到浏览器刷新，store里存的数据还在吗？
Vuex遇到浏览器刷新，store里存的数据还在吗？
在使用Vue进行前端开发时，Vuex是一个常用的状态管理库，可以帮助开发者更方便地管理应用的状态。但是，当浏览器页面刷新时，Vuex store中的数据是否会丢失？本文将探讨这个问题，并提供解决方案。
使用Vuex能解决什么问题？
1. 公共数据统一管理
比如我们在前端项目中，用户的余额就是一个公共数据。可能在支付的时候需要用到，在个人中心展示的时候需要用到，在充值提现的时候也可以用到。
这个时候如果在项目初始化的时候获取一次用户余额，保存到store数据中。这样在这些不同的页面，我们就可以直接拿来使用。
2. 避免多次发送数据请求
试想一下，这些页面如果没有一个公共的地方存储。那每次展示的时候，就都需要从服务端获取，那将会增加多次的前后端请求。
3. 强化异步数据更新
比如我们在充值或者提现，或者购买的界面做了操作，那么余额必将发生改变。这个时候，如果有了统一的数据状态管理，那么就可以一处发生改变，处处改变。而不用每个地方都重新发送请求，获取。
什么时候不适合使用Vuex呢？
看似使用起来很方便，好处多多，但也不是说项目一安装脚手架，就赶紧把Vuex装上，随时准备使用。在这些情况下是不适合使用Vuex的。
1. 项目简单
比如你的项目就是一个很小的页面，没什么可管理的状态，顶多就是父组件给子组件传一次，然后再传回来就可以了。那就没必要引入Vuex，父子组件来回传输两次也很简单便捷。
2. 团队经验
如果你的团队人员对Vuex开发经验较少，而且项目工期又紧张。那还是不要使用Vuex了。要不管理的状态越多，项目越复杂，最后弄不好项目弄成一团乱麻，越着急越找不到存到哪里了，去哪里更改状态。还不如直接发送请求来的直接醒目呢。
3. 状态值较少
我们知道父子组件，传输数据相对简单。但再深一些就会麻烦，一般就会想到Vuex了。但如果你的项目，就那么一个数据需要管理，其实这个时候也不太适合引入Vuex。对这点便捷相比，你引入的那个Vuex文件，其实也不太划算。
如果浏览器刷新，Vuex中数据不存在了怎么办？
Vuex虽然可以使我们不刷新浏览器，就可以共享数据状态，但这毕竟是一个运行内存数据，也就是说这是一个JS变量。一旦浏览器刷新了，store的数据就恢复了，就初始化了，很可能就跟之前更改的值不同了。
1. 存两份
所以在我们初始化项目的时候，一些值需要发送请求然后进行初始化赋值。例如用户名，例如余额值，当我们发送请求拿到结果后。需要往store里存一份，顺带着往浏览器的localStorage中也存一份。
localStorage的存储，或者cookie的存储，我们推荐使用 js-tool-big-box 工具库的公共方法，学习文档：前端JS必用工具【js-tool-big-box】，获取浏览器参数、cookie、localStorage的存取
这是一点，另外呢，像我们上面说的，如果在购买界面发生了操作，那么余额就会发生变化。这个时候，获取到了最新的余额，也需要往store里存一份，顺带着往 localStorage 中也存一份。
2. 浏览器刷新
当浏览器刷新的时候，我们就需要在初始化的时候，检测localStorage的值，并且为store数据赋值。这样就解决了刷新浏览器Vuex数据丢失的问题。
当然，保险一些的做法，就是再检测一下localStorage中是否有值，如果没有值，就再像最初来到页面的时候一样，发送一次请求，给Vuex中的store和localStorage再分别赋值一下。