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

walterrwu 发布于2019-08-23 16:54 / 1926人阅读

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

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

插件地址: vuex-solidification , 欢迎star

插件原理

vuex有一个hook方法：store.subscribe((mutation, state) => {}) 每次在mutation方法执行完之后都会调用这个回调函数，返回执行完毕之后的state

使用方法 安装

npm install --save vuex-solidification

引入及配置

import Vue from "vue"
import Vuex from "vuex"
import count from "./count/index.js";
import createPersistedState from "vuex-solidification";

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: {
            value: 0,
            num: 1
        },
        pos: 1
    }
    plugins: [ // 默认存储所有state数据到localstorage
        createPersistedState()
    ]
});

插件参数说明

createPersistedState({options}) : Function

options里面可以有:

key: String 存储到localStorage, sessionStorage 中对象的key，默认为vuex

local: Object 和 session: Object, 分别代表localStorage的配置和sessionStorage的配置

local 和 session 里面可以有: include: Array 和 exclude: Array

配置例子

createPersistedState({
    local: {
        include: ["count.value"] 
    }
})
/* 
    hook钩子触发之后，localstorage里面存储的对象为:
    {
        count: {
            value: 0,
        }
    }
*/


createPersistedState({
    local: {
        exclude: ["count.value"] 
    }
})
/* 
    hook钩子触发之后，localstorage里面存储的对象为:
    {
        count: {
            num: 1
        },
        pos: 1
    }
*/


createPersistedState({
    session: {
        include: ["count.value"] 
    }
})
/* 
    hook钩子触发之后，sessionstorage里面存储的对象为:
    {
        count: {
            value: 0,
        }
    }
*/


createPersistedState({
    session: {
        exclude: ["count.value"] 
    }
})
/* 
    hook钩子触发之后，sessionstorage里面存储的对象为:
    {
        count: {
            num: 1
        },
        pos: 1
    }
*/

createPersistedState({
    session: {
        include: ["count"] 
    },
    local: {
        include: ["pos"]
    }
})
/* 
    hook钩子触发之后，
    sessionstorage里面存储的对象为:
    {
        count: {
            value: 0,
            num: 1
        },
    }
    sessionstorage里面存储的对象为:
    {
        pos: 0
    }
*/

代码例子

Check out the example on CodeSandbox.

写在最后

欢迎交流，提issue和pr，

混合云专线服务 webrtc 浏览器刷新问题 modal消失问题数据分析解决问题数据分析问题解决

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

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

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

摘要：可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件。 vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。欢迎来点点我的个人博客showImg(https://user-...

adie 2019-08-23 10:37 评论0 收藏0
DIY 一个 Vuex 持久化插件

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

Half 2019-08-26 13:42 评论0 收藏0
前端入坑体验与分享

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

hss01248 2019-08-22 18:09 评论0 收藏0
刷新页面vuex数据不消失和不跳转页面

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

tracymac7 2019-08-26 11:32 评论0 收藏0