vue-auto-storage
v1.8.2
Published
An automatic storage plugin for Vue2, persist the data with localStorage.
Downloads
33
Maintainers
Readme
vue-auto-storage
An automatic storage plugin for Vue2, persist the data with localStorage.
Demo
Requirements
Vue.js 2.x
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
yarn add vue-auto-storage
Usage
Registration
main.js
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