Vuex与数据持久化

1 .如果想让某些数据页面刷新之后不消失，那就可以结合本地存储做到数据持久化
2 .比如之前的搜索记录，还有一些需要依赖的数据。比如本次活动的代号存下来，让我在一段时间内，根据这个编号来确定相关代号代表的一批数据可以缓存在本地，一遍在下一次请求的时候快速返回
3 .实现原理：在mutations定义的方法里对vuex的状态操作的同时对存储也做相应的操作
4 .插件vue-savedata，vuex-persistedstate

5 .实际实现:监听浏览器的刷新，刷新之前把vuex存在本地，在路由拦截处获取本地储存，放进vuex并删除本地存储，可以自由控制存localstorage和sessionStorage，完全避免插件来消耗性能。
6 .不同页面之间的数据传值，vuex适合组件间传值。
7 .有的问题研究一分钟和一个小时，是会发现不同的问题。

区别

1 .vuex存储在内存。localstorage则以文件的方式存储在本地
2 .应用场景：vuex用于组件之间的传值，localstorage则用于不同页面之间的传值
3 .永久性：当刷新页面时vuex存储的值会丢失。localStorage不会

1 .对于不变的数据vuex可以替代localstorage,但是当两个组件公用一个数据源，并且一个组件改变了该数据源的时候，希望咧那个一个组件相应改变化的时候，localstorage是无法做到的。
2 .我之前可以避免是因为在路由切换的时候即时的进行了数据更新，或者压根这个数据就是这个组件单个使用的。
3 .实时的响应是无法做到的。
4 .一个数据对象同时在对各页面n个组件中同时展示，并且有增删改查需求，还要保持状态唯一，就会发现vuex集中管理数据的好处。否则就要各组件各自实现增删改查逻辑，数据更新之后推送消息到各个组件中一一更新，但是没有必要
5 .响应式：更多的时候是二者配合，而不是各自替代
6 .

4 .localstorage:只能进行简单的数据读写，对不同组件之间读取数据并做数据转化时，需要对每个读写操作都写一遍代码,重点是存放
5 .vuex是状态管理，重点是管理数据，一个是数据容器，一个是数据管理器。
6 .

在页面刷新时保留状态数据

1 .一旦有修改就同步到localStorage里面
2 .页面刷新的之前做同步

    //在页面加载时读取localStorage里的状态信息
    localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
    
    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
        localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
    })