Nocturnal Pumpkin Maelstrom

    vue-auto-storage
    TypeScript icon, indicating that this package has built-in type declarations

    1.8.2 • Public • Published

    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

    Install

    npm i vue-auto-storage

    DownloadsWeekly Downloads

    55

    Version

    1.8.2

    License

    MIT

    Unpacked Size

    18 kB

    Total Files

    12

    Last publish

    Collaborators

    • dahann