vuex页面刷新数据丢失怎么办?,vuex刷新数据丢失

　　本文主要介绍如何解决vue页面刷新和数据丢失的问题，帮助大家更好的理解和使用vue框架。感兴趣的朋友可以了解一下。

　　在做vue项目的过程中，有时候会遇到一个问题，就是刷新F5页面时，页面的数据会丢失。出现这个问题的原因是，当vuex用于全局状态管理时，store中的数据保存在运行内存中，当页面刷新时，vue实例会被重新加载，store中的数据会被重新赋值，所以数据会丢失。解决方案如下：

　　解决方法一：

　　首先想到的是使用localStorage/sessionStorage对外存储数据，做一个持久存储。下面是使用localStorage存储的具体方案：

　　方案一：因为状态中的数据是有响应的，并且通过变异修改数据，所以调用localStorage.setItem()方法在通过变异修改状态中的数据的同时存储数据。

　　从“Vue”导入Vue；

　　从“Vuex”导入Vuex；

　　vue . use(Vuex)；

　　导出默认的新Vuex。商店({

　　状态：{

　　订单列表：[]，

　　菜单列表：[]

　　},

　　突变：{

　　订单列表{

　　s . order list=d；

　　window . local storage . setitem( list ，JSON.stringify(s.orderList))

　　},

　　菜单列表(s，d) {

　　s . menu list=d；

　　window . local storage . setitem( list ，JSON.stringify(s.menuList))

　　},

　　}

　　})

　　页面加载完成后，取出数据，通过localStorage.getItem()放回vuex。可以在app.vue的created()周期函数中编写以下代码：

　　if(window . local storage . getitem( list ){

　　这个。$ store . replace state(object . assign({ }，

　　这个。$store.state，JSON . parse(window . local storage . getitem( list )))

　　}

　　方案二：方案一可以顺利解决问题，但是连续触发localStorage.setItem()方法对性能不是特别友好。而且好像也不需要一直用vuex进行状态管理，用localStorage就行了，所以上面的解决方案都有所改进。数据的本地存储是通过监视页面刷新时触发的beforeunload事件来执行的。具体方法是在App.vue的created()周期函数中写以下代码：

　　if(window . local storage . getitem( list ){

　　这个。$ store . replace state(object . assign({ }，this。$store.state，JSON . parse(window . local storage . getitem( list )))

　　}

　　window . addevent listener( before unload ，()={

　　window . local storage . setitem( list ，JSON.stringify(this。$store.state))

　　})

　　解决方法二（推荐）：

　　该方法基于对计算的计算属性的理解。vue的官方文件中有这样一段话：

　　由此可知，计算属性的结果会被缓存，也就是说，如果有缓存，computed会优先缓存，所以在状态数据对应的页面上也可以这样写：

　　计算值：{

　　orderList() {

　　归还这个。$store.state.orderList

　　}

　　}

　　以上是解决vue页面刷新和数据丢失问题的详细内容。更多关于vue页面刷新和数据丢失的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。