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

vuex的数据持久化处理

基于vuex的数据持久化

存在问题：

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

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

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

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

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

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

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

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

实现方式：

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

• vuex的state在localStorage或sessionStorage取值
• 在mutations里面，定义的方法对vuex的状态操作的同时，对存储也做对应的操作

2.利用vue-presistedstate插件

• 原理和方法1一样，也是结合了浏览器的本地存储localStorage和sessionStorage，只不过是统一的配置，不需要每次都手写存储方法。
• 安装方式；npm install vuex-persistedstate --save
• 引入：在store下的index.js中引入，然后使用插件plugins

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

这样就实现了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来进行储存数据了

总结

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

最新评论