Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zh-rocco/vue-auto-storage
:beers: An automatic storage plugin for Vue2, persist the data with localStorage.
https://github.com/zh-rocco/vue-auto-storage
autosave autostore persistence persistent-storage vue-plugin
Last synced: 27 days ago
JSON representation
:beers: An automatic storage plugin for Vue2, persist the data with localStorage.
- Host: GitHub
- URL: https://github.com/zh-rocco/vue-auto-storage
- Owner: zh-rocco
- License: mit
- Created: 2018-07-17T15:21:38.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-16T02:44:44.000Z (almost 2 years ago)
- Last Synced: 2024-08-09T08:26:57.323Z (5 months ago)
- Topics: autosave, autostore, persistence, persistent-storage, vue-plugin
- Language: JavaScript
- Homepage: https://zh-rocco.github.io/vue-auto-storage/
- Size: 1.2 MB
- Stars: 83
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-auto-storage
> An automatic storage plugin for Vue2, persist the data with localStorage.
[](https://vuejs.org/)
[](http://npm-stats.com/~packages/vue-auto-storage)
[](https://github.com/zh-rocco/vue-auto-storage/stargazers)
[](https://david-dm.org/zh-rocco/vue-auto-storage?type=dev)
[](https://www.npmjs.com/package/vue-auto-storage)
[](https://github.com/zh-rocco/vue-auto-storage/)
[](https://travis-ci.org/zh-rocco/vue-auto-storage)
[](https://github.com/zh-rocco/vue-auto-storage/blob/master/LICENSE)
## Demo
[Try it out](https://zh-rocco.github.io/vue-auto-storage/)
## Requirements
- [`Vue.js 2.x`](https://cn.vuejs.org/)
- `IE9 +`
## Advantages
- Simple API.
- Small bundle size: 3.86KB (1.42KB gzipped).
- No dependencies.
## Attention
Obey the following:
- Vue component must has a unique `name` field.
- The target component can't used multiple times, eg: not used by `v-for`.
## Installation
```bash
yarn add vue-auto-storage
```
## Usage
### Registration
main.js
```javascript
import Vue from "vue";
import App from "./App.vue";
import AutoStorage from "vue-auto-storage";
Vue.use(AutoStorage);
// or with options
// Vue.use(AutoStorage, { debounce: 100 });
new Vue({
render: (h) => h(App),
}).$mount("#app");
```
### Example
Add `autoStorage` filed to Vue component's options object, declare the keypath of `data` you want to persist.
```javascript
export default {
name: "ComponentName",
autoStorage: ["a.b", "c.0.d", "f"],
data() {
return {
a: { b: "" },
c: [{ d: "" }, { e: "" }],
f: "",
};
},
created() {},
};
```
Use in TypeScript:
```typescript
import { Component, Vue } from "vue-property-decorator";
@Component({
autoStorage: ["a.b", "c.0.d", "f"],
})
export default class MyComponent extends Vue {
private a = { b: "" };
private c = [{ d: "" }, { e: "" }];
private f = "";
}
```
~~If you want persist an array's first item, use `array.0` instead of `array[0]`, [why?](https://github.com/vuejs/vue/blob/653aac2c57d15f0e93a2c1cc7e6fad156658df19/src/core/observer/watcher.js#L86-L89)~~
## Methods
| Function | Description | Parameters Type | Example |
| :--------- | :------------------------------------------------------------ | :-------------- | :------------------------------- |
| clear(key) | Clear storage. If no parameters, clear all AutoStorage cache. | `String`, `N/A` | `this.$autoStorage.clear("a.b")` |
## Plugin Configurations
| Property | Description | Type | Default |
| :------- | :----------------------------------------- | :----------------------------------------------------------------------------------------------- | :------------- |
| debounce | Debounce time of watchers, unit: `ms`. | `Number` | 300 |
| storage | Any object following the Storage protocol. | `Object` [more](https://github.com/zh-rocco/vue-auto-storage/blob/master/types/index.d.ts#L1-L6) | `localStorage` |
Stay tuned for more configurations.
## Development
```bash
yarn dev
```
## Build
```bash
yarn build:lib
```
## Test
```bash
yarn test
```
## Todo Features
- Support Vuex.
## License
MIT © [zh-rocco](https://github.com/zh-rocco)