一、Vuex为什么要持久化?

原因：因为Vuex是基于内存，存在内存里面的，刷新网页之后就没有了，不会持久化储存

解决方案：以token举例(存储登录信息)

实现思路：只要Vuex中的数据发生变化，就自动往本地同步一份

二、vuex持久化实现步骤

1. 安装

1）安装一个vuex的插件 vuex-persistedstate 来支持vuex的状态持久化

// npm安装命令:npm i vuex-persistedstate --save// yarn安装yarn add vuex-persistedstate

注意: 该插件应是生产依赖包, 所以要 -S
在package.json中

2. 配置仓库store

2）在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 cart.js

import Vue from 'vue'
import Vuex from 'vuex'
import loginModule from './modules/loginModule'
import createPersistedstate  from 'vuex-persistedstate'Vue.use(Vuex)export default new Vuex.Store({state: {},mutations: {},actions: {},modules: {loginModule},plugins:[createPersistedstate({key:'user',// 存数据的key名   自定义的  要有语义化// paths: ['loginModule'] // 要把那些模块加入缓存}) ]
})

三、存储不同模块数据

1. 获取指定模块state数据

2. 获取全局state和模块数据

3. 只存储state全局数据

四、API方法

createPersistedState([options])使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：

key ：存储持久状态的键。（默认：vuex）

paths ：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）

reducer ：一个函数，将被调用来基于给定的路径持久化的状态。默认包含这些值。

subscriber ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)

storage ：而不是（或与）getState和setState。默认为localStorage。

getState ：将被调用以重新水化先前持久状态的函数。默认使用storage。

setState ：将被调用来保持给定状态的函数。默认使用storage。

filter ：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true

Vuex - 持久化相关推荐

3项目里面全局用less变量 cli vue_Vue实战14——抽离全局less变量与Vuex持久化、多模块构建...
上文中说到了利用Element-ui优化了导航栏,本节介绍抽离公共的less变量与利用Element-Ui实现登录注册页面.本项目git地址: https://gitee.com/vuejslearn ...
Vue 进阶系列丨vuex持久化
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
vuex状态持久化_Vuex持久化存储之vuex-persist
Vuex 解决了多视图之间的数据共享问题.但是运用过程中又带来了一个新的问题是,Vuex 的状态存储并不能持久化.也就是说当你存储在 Vuex 中的 store 里的数据,只要一刷新页面,数据就丢失了 ...
马小看前端( vuex数据持久化简单的操作 )
马小看前端( vuex数据持久化简单的操作 ) 1.首先在小黑框中下载插件! npm install vuex-persistedstate 2.在store.js中引入下面的代码,即可完成数据持久化 ...
Vuex与Pinia的使用与其持久化以及两者之间的差别
vuex在vue3的简单使用 index.js文件import { createStore } from 'vuex' export default createStore({state: {num: ...
vuex本地储存方案
vuex 持久化本储存解决方案 vuex本地持久化插件vuex-persistedstate vuex-persistedstate插件可以帮助我们将state中的数据持久化,让我们使用起来更方便 v ...
vuex 的理解，vuex 的执行机制
vuex 是 vue 的状态管理工具管理项目中的公共数据能够在所有的组件中使用 vuex一共有五大核心: state 存放公共数据的地方通过 this.$store.state.xxx调用 mu ...
用vuex对token/refresh_token 进行管理以及处理token过期问题
这里介绍对token的处理问题1:token数据或者其他数据,存在vuex仓库中,刷新会丢失状态 . 问题2:数据只存在本地,数据变化了,相关的视图并不会更新. Vuex 容器中的数据只是为了方便在 ...
闲云旅游项目开发-（第二篇：实现登录功能，使用vuex的store管理数据）
目录一登录注册页布局二登录功能 1.思路 2.实现步骤 2.1 新建登录表单组件 2.2 表单数据绑定及验证 2.3 登录接口 3.总结三使用vuex/store管理数据 1.思路 2. ...

Vuex - 持久化