乐趣区

关于服务器:解决vue页面刷新数据丢失

jiezi

在做 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}
}

文章来自网络，侵删

退出移动版