:memo: A plugins to auto save and restore state for vuex
English | 简体中文
常用于刷新网页后自动恢复 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"], }, }), ], });
| 字段 | 必选 | 类型 | 描述 | | ----------- | ---- | ------- | ----------------------------------------- | | name | 否 | String | 设置本地数据集合的名字,默认为 vuex-along | | local | 否 | Object | localStorage 的配置,见 #WatchOptions | | session | 否 | Object | sessionStorage 的配置,见 #WatchOptions | | justSession | 否 | Boolean | 仅使用 sessionStorage |
| 字段 | 必选 | 类型 | 描述 | | -------- | ---- | --------- | ------------------------------------ | | list | 是 | String [] | 需要监听的属性名或模块名的字符串列表 | | isFilter | 否 | Boolean | 过滤 list 中的字段而非保存 |
window.clearVuexAlong(local = true, session = true):void; clearVuexAlong() // localStorage 和 sessionStorage 都会被清理 clearVuexAlong(true,false) // 只清理 localStorage clearVuexAlong(false,true) // 只清理 sessionStorage
git clone https://github.com/boenfu/vuex-along.git cd ./vuex-along yarn run:demo
typescript
IE11可用
sessionStorage数据恢复优先级高于
localStorage
key固定为
root
|