Vuex持久化插件-解决刷新数据消失的问题

adie 发布于2019-08-23 10:37 / 3263人阅读

摘要：可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件。

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。

欢迎来点点我的个人博客

1.手动利用HTML5的本地存储

方法

vuex的state在localStorage或sessionStorage或其它存储方式中取值

在mutations,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。

这样state就会和存储一起存在并且与vuex同步

问题

最直观的就是，手动写比较麻烦。

2.利用vuex-persistedstate插件

插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法

使用方法

安装

npm install vuex-persistedstate  --save

引入及配置

在store下的index.js中

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

默认存储到localStorage

想要存储到sessionStorage，配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

想使用cookie同理
默认持久化所有state

指定需要持久化的state,配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
          return {
          // 只储存state中的assessmentData
          assessmentData: val.assessmentData
        }
     }
  })]

vuex引用多个插件的写法

譬如：vuex提示的插件和持久化的插件一起使用，配置如下

import createPersistedState from "vuex-persistedstate"
import createLogger from "vuex/dist/logger"
// 判断环境 vuex提示生产环境中不使用
const debug = process.env.NODE_ENV !== "production"
const createPersisted = createPersistedState({
  storage: window.sessionStorage
})
export default new Vuex.Store({
 // ...
  plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})

plugins要是一个一维数组不然会解析错误

点击跳转插件GITHUB地址

云服务器 GPU云服务器数据分析解决的问题 modal消失问题解决问题的方法云计算解决的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96513.html

vuex持久化插件-解决浏览器刷新数据消失问题

摘要：众所周知，的一个全局状态管理的插件，但是在浏览器刷新的时候，内存中的会释放，通常的解决办法就是用本地存储的方式保存数据，然后再初始化的时候再赋值给，手动存再手动取会觉得很麻烦，这个时候就可以使用的插件插件地址欢迎插件原理有一个方法每次在众所周知，vuex的一个全局状态管理的插件，但是在浏览器刷新的时候，内存中的state会释放，通常的解决办法就是用本地存储的方式保存数据，然后再vue...

walterrwu 2019-08-23 16:54 评论0 收藏0
DIY 一个 Vuex 持久化插件

摘要：接下来我们会从上述两个功能点出发，完成一个持久化插件。在我们的持久化插件中，就是在这个函数内部对数据进行持久化操作。而则整个被监听，所以任何对于的改动都会被持久化并能够被恢复。在做 Vue 相关项目的时候，总会遇到因为页面刷新导致 Store 内容丢失的情况。复杂的项目往往涉及大量的状态需要管理，如果仅因为一次刷新就需要全部重新获取，代价也未免太大了。那么我们能不能对这些状态进行本...

Half 2019-08-26 13:42 评论0 收藏0
刷新页面vuex数据不消失和不跳转页面

摘要：先说点什么和路由拦截这一块捣鼓的有一段时间了总算是爬出来了特地来分享一下首先声明没有什么基础介绍用的是登录状态存储的方法进入正题刷新刷新相当与重启项目，之前获取到的数据也只是通过暂存起来，项目关闭时就不见了，这有些像电脑重启，存储在的数据会先说点什么 vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储session...

tracymac7 2019-08-26 11:32 评论0 收藏0
前端入坑体验与分享

摘要：同源策略同源策略是一种约定，由公司年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到等攻击。一、Vue变化检测背景初始化对象，属性未知；某些事件触发时，对象改变（新增属性），Vue监听不到原因 Vue.js 不能检测到对象属性的添加或删除，因为Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 dat...

hss01248 2019-08-22 18:09 评论0 收藏0