vuex-along

by boenfu

boenfu / vuex-along

:memo: A plugins to auto save and restore state for vuex

226 Stars 35 Forks Last release: Not found MIT License 62 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

English | 简体中文

Travis (.org) branch npm npm NPM GitHub last commit PRS

vuex-along - 持久化存储 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()] });

到此为止,插件已经生效了,默认会存储所有 state 到 localStorage

传入需要的 参数 来满足使用需求

示例

→ 在线示例

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
  • 微信小程序适配

贡献者们

维护者

License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.