vuex状态持久化_Vuex持久化存储之vuex-persist

Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是，Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。

引入vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下：

安装：npm install --save vuex-persist

yarn add vuex-persist

引入：import VuexPersistence from 'vuex-persist'

先创建一个对象并进行配置：const vuexLocal = new VuexPersistence({

storage: window.localStorage

})

引入进vuex插件：const store = new Vuex.Store({

state: { ... },

mutations: { ... },

actions: { ... },

plugins: [vuexLocal.plugin]

})

通过以上设置，在图3中各个页面之间跳转，如果刷新某个视图，数据并不会丢失，依然存在，并且不需要在每个 mutations 中手动存取 storage 。

vuex-persist 的详细属性：属性

类型

描述

key

string

将状态存储在存储中的键。默认: 'vuex'

storage

Storage (Web API)

可传localStorage, sessionStorage, localforage 或者你自定义的存储对象. 接口必须要有get和set. 默认是: window.localStorage

saveState

function (key, state[, storage])

如果不使用存储，这个自定义函数将保存状态保存为持久性。

restoreState

function (key[, storage]) => state

如果不使用存储，这个自定义函数处理从存储中检索状态

reducer

function (state) => object

将状态减少到只需要保存的值。默认情况下，保存整个状态。

filter

function (mutation) => boolean

突变筛选。看mutation.type并返回true，只有那些你想坚持写被触发。所有突变的默认返回值为true。

modules

string[]

要持久化的模块列表。

vuex状态持久化_Vuex持久化存储之vuex-persist相关推荐

vuex状态持久化：vuex-persistedstate解决刷新浏览器后vuex状态重置问题
一.问题和原因问题和现象:刷新浏览器后vuex状态重置原因:vuex将数据保存在cache(运行内存)中,内存中的数据是临时数据,刷新浏览器就会释放.类似于js创建一个变量,刷新浏览器变量会销毁, ...
Vuex状态刷新状态丢失的处理方法
1.Vuex 1-1 一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化,解决组件之间同一状态的共享问题. 1-2 Vuex优势:相比sessionStorage,存储数据 ...
token为什么要存放在本地存储和vuex两个地方
背景:token是用来做访问权限控制的(没有token,不能去那些需要token才能访问的页面),调用哪些需要授权的api接口,多个地方都要使用,所以要找个地方统一存放 token直接存放在本地存储, ...
(2021) 22 [持久化] 1-Bit的存储
(2021) 22 [持久化] 1-Bit的存储南京大学操作系统课蒋炎岩老师网络课程笔记. 视频:https://www.bilibili.com/video/BV1HN41197Ko?p=22 讲 ...
vue2中vuex状态管理的理解（菜单面包板）
本片理解基于vue2对应的Vuex文档,结合了官网文档以及众多前辈大佬所发布的帖子,由衷表示感谢. vuex的超详细讲解和具体使用细节记录随着我们进一步扩展约定,即组件不允许直接变更属于 store ...
vue2项目复习01-关闭elint检校，src文件别名，路由传参的对象写法，代理解决跨域问题，nprogress，vuex状态管理库，store的模块式开发，节流与防抖，编程式导航+事件委托路由跳转
1.关闭elint语法校验创建vue.config.js //关闭elint语法校验 {lintOnSave:false; } 2.src文件夹配置别名 jsconfig.json配置别名 @代表s ...
Vuex---在 Vue 组件中获得 Vuex 状态state
Vuex使用单一状态树(一个对象就包含了全部的应用层级状态),它作为唯一数据源存在,每个应用仅仅有一个store实例. 单一状态树使得我们能够直接定位任一特定的状态片段,在调试过程中也能轻易地取得整个 ...
[vuex]状态管理vuex
vuex 状态管理vuex,之前一般都是通过一个全局js文件实现全局设置,在vue中通过vuex进行管理简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的 ...
vue3.0 请求拦截对Token处理,导航守卫判断是否登录,响应拦截,觖析token存储到vuex中
需求:用户点击登录的时候获取token存取下来,然后放入请求拦截,因为用户上拉刷新下拉加载的时候需要用到;不然用户一刷新,服务端都不知道用户是谁了目录请求存储token: 请求拦截,及请求错误的响 ...

vuex状态持久化_Vuex持久化存储之vuex-persist

vuex状态持久化_Vuex持久化存储之vuex-persist相关推荐

最新文章

热门文章