在做vue我的项目的过程中有时候会遇到一个问题，就是进行页面刷新的时候，页面的数据会失落，呈现这个问题的起因是因为当用vuex做全局状态治理的时候，store中的数据是保留在运行内存中的，页面刷新时会从新加载vue实例，store中的数据就会被从新赋值，因而数据就失落了，解决形式如下：
解决办法一：
最先想到的应该就是利用localStorage/sessionStorage将数据贮存在内部，做一个长久化贮存，上面是利用localStorage存储的具体计划：
计划一：因为state中的数据是响应式的，而数据又是通过mutation来进行批改，故在通过mutation批改state中数据的同时调用localStorage.setItem()办法来进行数据的存储。
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export default new 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，可在app.vue的created()周期函数中写如下代码：
if (window.localStorage.getItem("list") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list"))))}计划二：计划一可能顺利解决问题，但一直触发localStorage.setItem()办法对性能不是特地敌对，而且始终将数据同步到localStorage中仿佛就没必要再用vuex做状态治理，间接用localStorage即可，于是对以上解决办法进行了改良，通过监听beforeunload事件来进行数据的localStorage存储，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)) })解决办法二（举荐）：
这个办法是基于对computed计算属性的了解，在vue的官网文档中有这么一段话：
咱们能够将同一函数定义为一个办法而不是一个计算机属性。两种形式的最终后果的确是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的只在相干响应式依赖产生扭转时它们才会从新求值。这就意味着只有message还没有产生扭转，屡次拜访reversedMessage计算属性会立刻返回之前的计算结果，而不用再次执行函数。
由此得悉计算属性的后果会被缓存，也就是说在有缓存的状况下，computed会优先应用缓存，于是也能够在state数据绝对应的页面这样写：
computed:{ orderList() { return this.$store.state.orderList }}文章来自网络，侵删