Vue-auto-storage NPM

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?~~