vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vuex的数据持久化处理

关于vuex的数据持久化处理方式

作者:安和橋北

这篇文章主要介绍了关于vuex的数据持久化处理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vuex的数据持久化处理

基于vuex的数据持久化

存在问题:

前端在使用vuex存储数据的时候,一旦页面刷新,所有之前存储的数据就会丢失。

这是因为js代码运行在内存中,代码在运行时,所有的变量和函数都是保存在内存中的,因此在刷新时,之前申请的内存会被释放,js脚本会被重新加载,变量重新赋值。

此问题映射在本项目上的体现:

为了更直观方便的处理数据,一方面在数据库中设置了服务类型表,另一方面在前端视图层处理时,将服务列表里的类型数据都统计一遍,存放在vuex的state中。

为了提高本项目的执行效率,我在vuex中设置了一个flag布尔变量,初值为true,保证只有在第一次挂载组件时才向后台发出请求,获取所有服务信息,并且修改flag值为false。

但是这样就会导致一个问题:下一次再重新登陆的时候,vuex数据刷新,但是不会再请求后台数据了,因此得不到后台的数据。

然后我又找了一个办法,当每次登陆的时候,把vuex中的flag值重新设置为true,这样虽然解决了之前登陆之后没有数据显示的问题,但是同时也造成了另一个问题:数据累加,登陆一次所有之前的服务类型数据就会累加一次

解决方法:使用vuex的数据持久化

实现方式:

1.利用浏览器的本地存储localStorage和sessionStorage

2.利用vue-presistedstate插件

本项目为了高效方便,采用了第二种下载插件的方式。

这样就实现了vuex中数据持久化的效果,之前存储的数据再刷新和退出之后就不会丢失了。

vuex实现数据持久化,数据刷新消失解决

为什么会有vuex数据持久化这么一说呢?

在开发中,有一些全局数据,比如用户数据,系统数据等。这些数据很多组件中都会使用,我们当然可以每次使用的时候都去请求,但是出于程序员的“洁癖”、“抠”等等优点,还是希望一次请求,到处使用。

这时候很自然的想到存储在 localStorage 中,但是有个问题是,这些数据可能会变,如果没能及时同步的话,就会用到不正确的数据,即使做了数据同步,但是 localStorage 中的数据不是响应式的,不能自动更新使用到这些数据的地方。这时候就想要开始使用 vuex 了。

但是在使用 vuex 的时候也遇到很多问题,比如,“一刷新就没啦”:

vuex 的数据是存储在浏览器维护的内存中,页面刷新会重新初始化,简单的说,就是没了。

localStorage 的数据是存储在浏览器维护的一个简单数据库里面,在本地文件中存储,所以可以“持久化”存在。

所以“一刷新就没啦”是很正常的。

下面就是解决的方案

首先第一种

使用localStorage 来进行存储,但是这样有一个问题

我们的数据是会更新的,但是我们如果存进localStorage里,就无法实时更新我们的数据,

哪怕我们真的做了数据同步,他的数据也不是响应式的,所以这个方法不建议使用!

第二种 使用vuex的插件 来解决

使用vuex-persistedstate

首先我们先安装这个插件

npm i -S vuex-persistedstate

配置使用

在vuex初始化的时候作为组件去引入

import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [persistedState()]
})

vuex-persistedstate默认使用localStorage来固化数据,一些特殊情况要如何应对呢?(如:Mac中的safari的无痕浏览模式)

这时候就需要使用sessionStorage

plugins: [
    persistedState({ storage: window.sessionStorage })
]

还有一种就是使用cookie的时候

import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
export default new Vuex.Store({
  // ...
  plugins: [
    persistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

最后我们在页面里需要使用辅助函数以及dispatch来触发就可以实现数据持久化

这样我们就可以使用vuex来进行储存数据了

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文