156 lines
4.4 KiB
Markdown
156 lines
4.4 KiB
Markdown
[English](./README.EN.md) | 简体中文
|
|
|
|
<p align="center"><img width="140" src="./logo.png"></p>
|
|
<p align="center">
|
|
<a href="#"><img alt="Travis (.org) branch" src="https://img.shields.io/travis/boenfu/vuex-along/master?style=flat-square"></a>
|
|
<a href="#"><img alt="npm" src="https://img.shields.io/npm/v/vuex-along?style=flat-square"></a>
|
|
<a href="#"><img alt="npm" src="https://img.shields.io/npm/dt/vuex-along?style=flat-square"></a>
|
|
<a href="#"><img alt="NPM" src="https://img.shields.io/npm/l/vuex-along?style=flat-square"></a>
|
|
<a href="#"><img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/boenfu/vuex-along?style=flat-square"></a>
|
|
<a href="http://makeapullrequest.com"><img alt="PRS" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square"></a>
|
|
</p>
|
|
|
|
<h2 align="center">vuex-along - 持久化存储 state 的 vuex 扩展</h2>
|
|
<p align="center"><b>常用于刷新网页后自动恢复 state</b></p>
|
|
|
|
# 目录
|
|
|
|
- [安装](#安装)
|
|
- [用法](#用法)
|
|
- [示例](#示例)
|
|
- [参数](#参数)
|
|
- [数据清理](#数据清理)
|
|
- [运行 demo](#运行demo)
|
|
- [提示项](#提示项)
|
|
- [贡献者](#贡献者)
|
|
- [维护者](#维护者)
|
|
- [License](#license)
|
|
|
|
## 安装
|
|
|
|
```shell
|
|
npm install vuex-along --save
|
|
# or
|
|
yarn add vuex-along
|
|
```
|
|
|
|
## 用法
|
|
|
|
```javascript
|
|
import createVuexAlong from 'vuex-along'
|
|
|
|
export default new Vuex.Store({
|
|
state:{...},
|
|
modules:{...},
|
|
plugins: [createVuexAlong()]
|
|
});
|
|
```
|
|
|
|
> 到此为止，插件已经生效了，默认会存储所有 state 到 localStorage
|
|
>
|
|
> 传入需要的 [参数](#参数) 来满足使用需求
|
|
>- [微信小程序适配器](https://github.com/boenfu/vuex-along-wx-adapter)
|
|
>- [数据加密适配器](https://github.com/boenfu/vuex-along-secure-adapter)
|
|
|
|
## 示例
|
|
|
|
[→ 在线示例](https://boenfu.github.io/vuex-along/)
|
|
|
|
```javascript
|
|
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 中的字段而非保存 |
|
|
|
|
## 数据清理
|
|
|
|
```typescript
|
|
window.clearVuexAlong(local = true, session = true):void;
|
|
clearVuexAlong() // localStorage 和 sessionStorage 都会被清理
|
|
clearVuexAlong(true,false) // 只清理 localStorage
|
|
clearVuexAlong(false,true) // 只清理 sessionStorage
|
|
```
|
|
|
|
## 运行 demo
|
|
|
|
```shell
|
|
git clone https://github.com/boenfu/vuex-along.git
|
|
cd ./vuex-along
|
|
yarn run:demo
|
|
```
|
|
|
|
## 提示项
|
|
|
|
- 支持 `typescript`
|
|
- `IE11`可用
|
|
- `sessionStorage` 数据恢复优先级高于 `localStorage`
|
|
- 存储内容的顶层对象的 `key` 固定为 `root`
|
|
|
|
## 贡献者们
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<a target="_blank" href="https://github.com/boenfu"><img width="60px" src="https://avatars0.githubusercontent.com/u/33797740?s=460&v=4"></a>
|
|
<a target="_blank" href="https://github.com/han-feng"><img width="60px" src="https://avatars3.githubusercontent.com/u/1127566?s=460&v=4"></a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
## 维护者
|
|
|
|
- [boen](https://github.com/boenfu)
|
|
|
|
## License
|
|
|
|
- [MIT](https://opensource.org/licenses/MIT)
|