vue-observable-persist

Automatically persists a Vue observable object using localStorage (or compatible API).

Instalation

yarn add vue-observable-persist

Usage

import Vue from "vue"
import persist from "vue-observable-persist"
 
import { User } from "~/types/User"
 
class Store {
    user: User = null
 
    async login() {
        this.user = await axios.get("/user")
    }
}
 
export const store = persist(Vue.observable(new Store()))

Options

If not explicitly overriden, the following defauts are used:

persist(store, {
    storage: localStorage,
    key: "store",
    fields: undefined, // pass array to save/load only certain keys: ["user", "token"]
    serialize: JSON.stringify,
    deserialize: JSON.parse,
})

Persisting existing (or imported) objects

const store = Vue.observable(new Store())
 
// store is converted to be persistent in place
persist(store)

Persisting Vue objects

import persist from "vue-observable-persist"
import { Component, Vue } from "vue-property-decorator"
 
import { User } from "~/types/User"
 
@Component
export class Store extends Vue {
    user: User = null
 
    async login() {
        this.user = await axios.get("/user")
        this.$emit("logged", this.user)
    }
}
 
export const store = persist(new Store())

NOTE: Nested Vue objects are currently not supported.

Persisting Vue Composition API objects

import { reactive } from "@vue/composition-api"
import persist from "vue-observable-persist"
 
import { User } from "~/types/User"
 
interface Store {
    user: User | null
}
 
export const store = persist(reactive<Store>({
    user: null,
}))

Persisting in NativeScript

import * as app_settings from "tns-core-modules/application-settings"
import persist from "vue-observable-persist"
 
export const store = persist(
    /* store object prepared with some of the methods above */,
    {
        storage: {
            setItem(key: string, value: string) {
                app_settings.setString(key, value)
            },
            getItem(key: string) {
                return app_settings.getString(key)
            },
        },
    },
)