在做vue项目的过程中有时候会遇到一个问题，就是页面刷新的时候，页面的数据会丢失。出现这个问题的原因是，当使用vuex作为全局状态管理时，store中的数据是存放在运行内存中的。当页面刷新时，Vue实例会被重新加载，store中的数据会被重新赋值，所以数据会丢失。解决方案如下：方案一：首先想到的应该是使用localStorage/sessionStorage对外存储数据，做一个持久化存储。下面是使用localStorage存储的具体解决方案：解决方案一：由于state中的数据是响应式的，并且数据是通过mutation来修改的，所以在修改的时候调用localStorage.setItem()方法存储数据状态中的数据通过变异。从'vue'导入Vue；从'vuex'导入Vuex；Vue.use(Vuex)；导出默认新Vuex.Store({state:{orderList:[],menuList:[]},mutations:{orderList(s,d){s.orderList=d;window.localStorage.setItem("list",jsON.stringify(s.orderList))},menuList(s,d){s.menuList=d;window.localStorage.setItem("list",jsON.stringify(s.menuList))},}})页面加载时，取出数据，通过localStorage.getItem()放回vuex，可以写在created()循环中app.vue的功能如下代码：localStorage.getItem("list"))))}方案二：方案一可以顺利解决问题，但是不断触发localStorage.setItem()方法对性能不是特别友好，貌似没必要用vuex用于状态管理，如果数据总是同步到localStorage。可以直接使用localStorage，所以对上面的方案进行了改进，localStorage存储数据是通过监听beforeunload事件来进行的。刷新页面时触发beforeunload事件。具体方法是在App.vue的created()循环函数中下载如下代码：if(window.localStorage.getItem("list")){this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(window.localStorage.getItem("list"))))}window.addEventListener("beforeunload",()=>{window.localStorage.setItem("list",JSON.stringify(this.$store.state))})方案二（推荐）：该方法基于对计算属性的理解，在vue的官方文档中有是这样一段话：我们可以将同一个函数定义为方法而不是计算机属性，两种方式的最终结果确实是完全一样的。但是，不同之处在于，计算属性是根据它们的反应依赖项进行缓存的，并且仅在相关的反应依赖项发生变化时才重新评估它们。这意味着只要消息没有改变，多次访问reversedMessage计算属性将立即返回之前的计算结果，而无需再次执行该函数。由此我们知道，computed属性的结果会被缓存，也就是说如果有缓存，computed会优先使用缓存，所以也可以在state数据对应的页面上这样写：computed：{orderList(){returnthis.$store.state.orderList}}文章来自网络，侵删
