Need help with vuex-along?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

boenfu
256 Stars 38 Forks MIT License 69 Commits 0 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 218,056
Vue.js
localst...
vuex
JavaScr...
57 commits
# 54,177
fontawe...
axios
vue-cli
CSS
2 commits

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.