VUE·奇技淫巧——vuex会话储存

vuex实现刷新不被清除功能

前几天开发遇到一个问题，就是使用vuex时候需要存储的东西在刷新情况下不被清理，因为vuex是挂载在vue的，所以在刷新页面时候vue实例被重置，vuex自然也会被刷新，以前的操作是存两份数据，一份在vuex，一份是sessionStorage里面，但是如果存两份，有时候总是感觉vuex的存在意义就不大了，而且代码也是丑爆了。今天就来介绍一个方法，同样可以实现效果：

目录.png

我们先打开app.vue文件，里面是vue的挂载点app：

代码.png

然后在里面加上这几行代码，我来解释一下，我们在vue生命周期created中，也就是数据生成时候进行操作——》第一步是从sessionStorage中查找一个叫store的字符对象，如果有，就获取到，并且解析成对象，并且赋值到vuex的state中，这其实就是查找值，赋值到vuex的操作。

——》第二步是试探浏览器或者手机类型，如果是苹果系统，那就使用pagehide这个值，否则的话就用beforeunload，这个非常关键，因为苹果手机是没有beforeunload这个方法的，如果不添加在苹果手机中将会实现不了这个功能了，所以务必添加这句。

——》第三步，根据不同类型的手机，在页面刷新前，将vuex的数据以字符对象的形式存到sessionStorage里面去，这样再刷新回来时候就可以直接在sessionStorage里面取值了。

以上三步就可以完成vuex的会话储存，也为我们使用vuex提供了很大的方便。更多vue的使用技巧，请关注我，我将不定时更新文章。

公众号