乐趣区

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

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

文章来自网络,侵删

退出移动版