useStorage

Create a reactive ref that can be used to access & modify ApplicationSettings and using useStorage of VueUse.

Uses localStorage plugin by default, other storage sources be specified via third argument.

WARNING

Breaking changes 0.0.43

Breaking changes since version 0.0.43. It is now not used as a utility to access ApplicationSettings values.

Now returns a reactive object that is binded with ApplicationSettings.

Usage

import { useStorage } from '@nativescript-use/vue'

// bind object
const state = useStorage('my-store', { hello: 'hi', greeting: 'Hello' }) // returns Ref<{ hello: string, greeting: string }>

state.value.hello = 'Updated Hi!'; // 🔄 Automatically synchronize with ApplicationSettings (localStorage)

// bind boolean
const flag = useStorage('my-flag', true) // returns Ref<boolean>

flag.value = false; // 🔄 Automatically synchronize with ApplicationSettings (localStorage)

// bind number
const count = useStorage('my-count', 0) // returns Ref<number>

count.value = 15; // 🔄 Automatically synchronize with ApplicationSettings (localStorage)


// delete data from storage
state.value = null

You can find all the documentation at useStorage of Vue Use.

Source

Source

Type declaration

import { LocalStorage } from '@nativescript-use/nativescript-localstorage';
import { RemovableRef, UseStorageOptions } from '@vueuse/core';

export declare function useStorage<T = any, K extends string = string>(
    key: K, 
    initialValue: T,
    storage?: LocalStorage<K>, 
    options?: UseStorageOptions<T>
): RemovableRef<T>;