vuex状态持久化：vuex-persistedstate解决刷新浏览器后vuex状态重置问题

一.问题和原因
问题和现象：刷新浏览器后vuex状态重置
原因：vuex将数据保存在cache(运行内存)中，内存中的数据是临时数据，刷新浏览器就会释放。类似于js创建一个变量，刷新浏览器变量会销毁，代码重新执行创建的是一个新的变量。

二.解决方案
解决方案就是使用前端存储，常见的是localstorage/sessionstorage，说到这里大家应该都有思路了，就是前端自己存一份，当vuex获取不到数据时尝试向localstorage/sessionstorage获取。

当然，相关的npm包有很多，大多数同学还是直接用包。
npm包解决：vuex-persistedstate。
vuex-persistedstate应该是下载量最多的包，可能是因为它的配置最简单，即便是后期添加，也不需要改动源代码。下载量如下图：
三.vuex-persistedstate使用
1）安装依赖

npm install --save vuex-persistedstate

2）store/index.js中引用和使用

import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
  ...,
  plugins: [createPersistedState()] // 数据持久化
})

到此完成配置。

四.后续
有些同学比较急，所以我就先上代码了，有时间的同学可以读完本文。

本文解决的问题也是我一开始抗拒用vuex的原因：既然我不得不单独存一份数据到localstorage/sessionstorage，为什么还要用vuex，我直接用localstorage/sessionstorage不好吗？

vuex的最大意义有2个，一个是数据集中化，一个是存取规范化。上面提到数据集中化的缺点让我一开始拒绝vuex，我也没有因为存取规范化而立刻用它。为什么？如果大家看过vuex文档或者你使用react接触过redux，有没有发现它们都强调一个观点？就是不要滥用，说白了就是90%的项目的复杂程度根本不需要它们，开发者都可以自己解决。

这里只是阐述一下我自己的观点，当然，我现在也用Vuex，因为你的同事都想用，搭开发环境你不给他们搭，他们肯定说你Low，不会新技术。但有经验的开发者都应该理解我的观点，任何包或者插件都是纸老虎，即便我们用，也一定要知道我为什么用它，它为我解决了什么问题，它的实现原理是什么，和我自己的解决方案有什么不同和优劣。这是我们每用一个npm包都应该思考的问题。