English | 简体中文

vuex-along - 持久化存储 state 的 vuex 扩展

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

目录

• 安装
• 用法
• 示例
• 参数
• 数据清理
• 运行 demo
• 提示项
• 贡献者们
• 维护者
• License

安装

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

• 微信小程序适配

贡献者们

维护者

• boen

License

• MIT