Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/boenfu/vuex-along
:memo: auto save and restore state for vuex
https://github.com/boenfu/vuex-along
localstorage vue vuex
Last synced: about 22 hours ago
JSON representation
:memo: auto save and restore state for vuex
- Host: GitHub
- URL: https://github.com/boenfu/vuex-along
- Owner: boenfu
- License: mit
- Created: 2018-03-18T10:09:06.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-11T18:34:02.000Z (10 months ago)
- Last Synced: 2024-10-31T14:29:21.397Z (19 days ago)
- Topics: localstorage, vue, vuex
- Language: TypeScript
- Homepage: https://boenfu.github.io/vuex-along/
- Size: 2.77 MB
- Stars: 259
- Watchers: 8
- Forks: 36
- Open Issues: 10
-
Metadata Files:
- Readme: README.EN.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
English | [简体中文](./README.md)
vuex-along - A plugins for vuex
Automatically restore vuex state after refreshing the page
# 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
## Maintainers
- [boen](https://github.com/boenfu)
## License
- [MIT](https://opensource.org/licenses/MIT)