156 lines
4.6 KiB
Markdown
156 lines
4.6 KiB
Markdown
English | [简体中文](./README.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 - A plugins for vuex</h2>
|
|
<p align="center"><b>Automatically restore vuex state after refreshing the page</b></p>
|
|
|
|
# Directory
|
|
|
|
- [Install](#Install)
|
|
- [Usage](#Usage)
|
|
- [Example](#Example)
|
|
- [Options](#Options)
|
|
- [Cleanup](#Cleanup)
|
|
- [RunDemo](#RunDemo)
|
|
- [Tips](#Tips)
|
|
- [Contribution](#Contribution)
|
|
- [Maintainers](#Maintainers)
|
|
- [License](#license)
|
|
|
|
## Install
|
|
|
|
```shell
|
|
npm install vuex-along --save
|
|
# or
|
|
yarn add vuex-along
|
|
```
|
|
|
|
## Usage
|
|
|
|
```javascript
|
|
import createVuexAlong from 'vuex-along'
|
|
|
|
export default new Vuex.Store({
|
|
state:{...},
|
|
modules:{...},
|
|
plugins: [createVuexAlong()]
|
|
});
|
|
```
|
|
|
|
> Now, the plugin has been in effect, and all state is stored to localStorage by default.
|
|
>
|
|
> Set [Options](#Options) to meet the usage requirements
|
|
>
|
|
>- [secure-adapter](https://github.com/boenfu/vuex-along-secure-adapter)
|
|
|
|
## Example
|
|
|
|
[→ Online Example](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({
|
|
//Set the collection name to avoid multi-project data conflicts with the same site
|
|
name: "hello-vuex-along",
|
|
local: {
|
|
list: ["ma"],
|
|
// Filter the module ma data, save the other to localStorage
|
|
isFilter: true,
|
|
},
|
|
session: {
|
|
// Save a1 in module ma to sessionStorage
|
|
list: ["ma.a1"],
|
|
},
|
|
}),
|
|
],
|
|
});
|
|
```
|
|
|
|
## Options
|
|
|
|
#### VuexAlongOptions
|
|
|
|
| **Field** | **Required** | **Type** | **Description** |
|
|
| ----------- | ------------ | -------- | ------------------------------------------------------------------------ |
|
|
| name | no | String | Set the name of the local data collection, the default is **vuex-along** |
|
|
| local | no | Object | LocalStorage configuration, see #WatchOptions |
|
|
| session | no | Object | SessionStorage configuration, see #WatchOptions |
|
|
| justSession | no | Boolean | Use only sessionStorage |
|
|
|
|
#### WatchOptions
|
|
|
|
| **Field** | **Required** | **Type** | **Description** |
|
|
| --------- | ------------ | --------- | ------------------------------------------------------------------------------ |
|
|
| list | yes | String [] | List of strings of attribute names or module names that need to be listened to |
|
|
| isFilter | no | Boolean | Filter fields in list instead of saving |
|
|
|
|
## Cleanup
|
|
|
|
```typescript
|
|
window.clearVuexAlong(local = true, session = true):void;
|
|
clearVuexAlong() // localStorage and sessionStorage will be cleaned up
|
|
clearVuexAlong(true,false) // Just localStorage
|
|
clearVuexAlong(false,true) // Just sessionStorage
|
|
```
|
|
|
|
## RunDemo
|
|
|
|
```shell
|
|
git clone https://github.com/boenfu/vuex-along.git
|
|
cd ./vuex-along
|
|
yarn run:demo
|
|
```
|
|
|
|
## Tips
|
|
|
|
- Support `typescript`
|
|
- Support `IE11`
|
|
- `sessionStorage` data recovery takes precedence over `localStorage`
|
|
- The `key` of the top-level object that stores the content is fixed to `root`
|
|
|
|
## Contribution
|
|
|
|
<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>
|
|
|
|
## Maintainers
|
|
|
|
- [boen](https://github.com/boenfu)
|
|
|
|
## License
|
|
|
|
- [MIT](https://opensource.org/licenses/MIT)
|