zh-rocco

Vue auto storage

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

Version Version: 1.8.2 Version Updated: 12/16/2018 By: zh-rocco License: MIT

DownloadsLast30Days: 236

https://github.com/zh-rocco/vue-auto-storage

npm i vue-auto-storage
yarn add vue-auto-storage

vue-auto-storage

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

vue-js downloads GitHub stars devDependencies npm-version Github tag Build Status GitHub license

Demo

Try it out

Requirements

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

Categories: UtilitiesStorage