vue-auto-storage
An automatic storage plugin for Vue2, persist the data with localStorage.
Demo
Requirements
Vue.js 2.xIE9 +
Advantages
- Simple API.
- Small bundle size: 3.86KB (1.42KB gzipped).
- No dependencies.
Attention
Obey the following:
- Vue component must has a unique
namefield. - The target component can't used multiple times, eg: not used by
v-for.
Installation
yarn add vue-auto-storage
Usage
Registration
main.js
h(App),
}).$mount("#app");">
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.
export default {
name: "ComponentName",
autoStorage: ["a.b", "c.0.d", "f"],
data() {
return {
a: { b: "" },
c: [{ d: "" }, { e: "" }],
f: "",
};
},
created() {},
};
Use in 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?
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 |
localStorage |
Stay tuned for more configurations.
Development
yarn dev
Build
yarn build:lib
Test
yarn test
Todo Features
- Support Vuex.
License
MIT © zh-rocco
85 Nov 24, 2021
669 Nov 29, 2022
24 Apr 22, 2020
2 Sep 28, 2021
60 Nov 21, 2022
1 Jun 17, 2020
169 Nov 3, 2022
101 Dec 22, 2022
53 Nov 16, 2022
28 Jun 21, 2022
532 Jan 7, 2023
0 May 10, 2018
16 Nov 24, 2022
119 Dec 15, 2022
42 Dec 5, 2022
1.6k Jan 5, 2023
155 Nov 19, 2022