我的博客
开发记录
前端笔记
前端文档
我的博客
开发记录
前端笔记
前端文档

Vuex 数据持久化存储

预计阅读时间: 4 分钟

业务需求：

  在基于 vue 开发 SPA 项目时，为了解决页面刷新后数据丢失的问题，我们一般都是将数据存储在 localstorage 或 sessionstorage 中；当数据需要全局处理统一管理时，我们也会借助于 vue 官方提供的 vuex 来进行数据的统一管理。

  vuex 相比 localstorage 或 sessionstorage 来说，存储数据更安全些。与此同时，vuex 也存在一些弊端，当页面刷新后，vuex 中 state 存储的数据同时也会被更新，vuex 中存储的数据不能持久化，需要监听处理来维持 vuex 存储的数据状态持久化。

  为解决页面刷新后 vuex 中存储的数据状态不能持久化的问题，我采取的方案是借助第三方插件工具来实现 vuex 数据的持久化存储，来解决页面刷新后数据更新的问题。

方案一：vuex-persistedstate

  • 安装插件
npm
yarn
pnpm
bun
1npm install vuex-persistedstate -S

  • 源代码

    Source

  • 使用方法

代码示例
1import Vuex from "vuex";
2// 引入插件
3import createPersistedState from "vuex-persistedstate";
4
5Vue.use(Vuex);
6
7const state = {};
8const mutations = {};
9const actions = {};
10
11const store = new Vuex.Store({
12	state,
13	mutations,
14	actions,
15	/* vuex数据持久化配置 */
16	plugins: [
17		createPersistedState({
18			// 存储方式：localStorage、sessionStorage、cookies
19			storage: window.sessionStorage,
20			// 存储的 key 的key值
21			key: "store",
22			render(state) {
23				// 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
24				return { ...state };
25			}
26		})
27	]
28});
29
30export default store;
  • vuex 中module数据的持久化存储
代码示例
1/* module.js */
2export const dataStore = {
3  state: {
4    data: []
5  }
6}
7
8/* store.js */
9import { dataStore } from './module'
10
11const dataState = createPersistedState({
12  paths: ['data']
13});
14
15export new Vuex.Store({
16  modules: {
17    dataStore
18  },
19  plugins: [dataState]
20});
注意事项
  • storage为存储方式，可选值为 localStorage、sessionStorage 和 cookies；
  • localStorage 和 sessionStorage 两种存储方式可以采用上述代码中的写法，若想采用 cookies 坐位数据存储方式，则需要另外一种写法；
  • render 接收一个函数，返回值为一个对象；返回的对象中的键值对既是要持久化存储的数据；
  • 若想持久化存储部分数据，请在 return 的对象中采用 key：value 键值对的方式进行数据存储，render 函数中的参数既为 state 对象。

方案二：vuex-persist

  • 安装插件
npm
yarn
pnpm
bun
1npm install vuex-persist -S

  • 源代码

    Source

  • 使用方法

代码示例
1import Vuex from "vuex";
2// 引入插件
3import VuexPersistence from "vuex-persist";
4
5Vue.use(Vuex);
6//  初始化
7const state = {
8	userName:'admin'
9};
10const mutations = {};
11const actions = {};
12// 创建实例
13const vuexPersisted = new VuexPersistence({
14	storage: window.sessionStorage,
15  render:state=>({
16  	userName:state.userName
17    // 或
18    ...state
19  })
20});
21
22const store = new Vuex.Store({
23	state,
24  actions,
25  mutations,
26  // 数据持久化设置
27  plugins:[vuexPersisted.plugins]
28});
29
30export default store;

属性方法

属性值数据类型描述
keystringThe key to store the state in the storage Default: 'vuex'
storageStorage (Web API)localStorage, sessionStorage, localforage or your custom Storage object.Must implement getItem, setItem, clear etc.Default: window.localStorage
saveStatefunction(key, state[, storage])If not using storage, this custom function handles saving state to persistence
restoreStatefunction(key[, storage]) => stateIf not using storage, this custom function handles retrieving state from storage
reducerfunction(state) => objectState reducer. reduces state to only those values you want to save. By default, saves entire state
filterfunction(mutation) => booleanMutation filter. Look at mutation.type and return true。 for only those ones which you want a persistence write to be triggered for. Default returns true for all mutations
modulesstring[]List of modules you want to persist. (Do not write your own reducer if you want to use this)
asyncStoragebooleanDenotes if the store uses Promises (like localforage) or not (you must set this to true when suing something like localforage) Default: false
supportCircularbooleanDenotes if the state has any circular references to itself (state.x === state)Default: false

总结

  上述两种方案都可以实现 vuex 数据持久化存储。方案一是我在实际开发过程中用到的，方案二是在 Github 上看到的，综合来说，两者都可以时间最终的需求，而且都有对应的案例 Demo 可以参考。相比来说方案一在 GitHub 上的 start 数要高于方案二。

  请结合实际情况选择符合自己的方案！