vuex-along - 页面刷新后vuex数据如何恢复

LeeTikPaak19

已于 2022-09-23 09:55:54 修改

阅读量683

点赞数

分类专栏：前端文章标签： javascript 前端 vue.js

于 2022-09-23 09:40:21 首次发布

本文链接：https://blog.csdn.net/weixin_43521227/article/details/127004372

版权

前端专栏收录该内容

36 篇文章 2 订阅

订阅专栏

持久化存储 state 的 vuex 扩展

常用于刷新网页后自动恢复 state

安装

npm install vuex-along --save
# or
yarn add vuex-along

用法

import createVuexAlong from 'vuex-along'

export default new Vuex.Store({
  state:{...},
  modules:{...},
  plugins: [createVuexAlong()]
});

示例

→ 在线示例

import createVuexAlong from "vuex-along";

const moduleA = {
  state: {
    a1: "hello",
    a2: "world",
  },
};

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  modules: {
    ma: moduleA,
  },
  plugins: [
    createVuexAlong({
      // 设置保存的集合名字，避免同站点下的多项目数据冲突
      name: "hello-vuex-along",
      local: {
        list: ["ma"],
        // 过滤模块 ma 数据， 将其他的存入 localStorage
        isFilter: true,
      },
      session: {
        // 保存模块 ma 中的 a1 到 sessionStorage
        list: ["ma.a1"],
      },
    }),
  ],
});

参数

VuexAlongOptions

字段	必选	类型	描述
name	否	String	设置本地数据集合的名字，默认为 vuex-along
local	否	Object	localStorage 的配置，见 #WatchOptions
session	否	Object	sessionStorage 的配置，见 #WatchOptions
justSession	否	Boolean	仅使用 sessionStorage

WatchOptions

字段	必选	类型	描述
list	是	String []	需要监听的属性名或模块名的字符串列表
isFilter	否	Boolean	过滤 list 中的字段而非保存

数据清理

window.clearVuexAlong(local = true, session = true):void;
clearVuexAlong() // localStorage 和 sessionStorage 都会被清理
clearVuexAlong(true,false) // 只清理 localStorage
clearVuexAlong(false,true) // 只清理 sessionStorage

运行 demo

git clone https://github.com/boenfu/vuex-along.git
cd ./vuex-along
yarn run:demo

提示项

支持 typescript
IE11可用
sessionStorage 数据恢复优先级高于 localStorage
存储内容的顶层对象的 key 固定为 root

用法

以上都是官方GitHub的用法，网上很多都没讲好，所以po在这里供大家参考

1.前端渲染优化：一些大数据的接口，刷新页面后需要重新获取接口，可以使用该插件

原理

新建文件 along.js
不清楚具体流程的可以加入打印步骤或者断点跟踪
1.判断是否支持localstorage
2.读取localstorage的值 ,判断是否存储过
3.存储过就更新
4.全局监听subscribe ,这个是API
5.业务逻辑比较简单话,可以一股脑全存进去
6.store文件作为插件配置，即是把along.js放入plugins项