vue-auto-storage

An automatic storage plugin for Vue2, persist the data with localStorage.

Demo

Try it out

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