@cljimenez/json-serializer-vue-localstorage-reacti

Wrapper to use @cljimenez/json-serializer-core and @cljimenez/json-serializer-base-serializers with @cljimenez/vue-localstorage-reactive

🏠 Homepage

Index

Install

@cljimenez/json-serializer-vue-localstorage-reactive

How to use?

Obtain the JsonSerializerAdapter object
The JsonSerializerAdapter is an object used to wrap the @cljimenez/json-serializer-core to be used directly by @cljimenez/vue-localstorage-reactive, also it adds the serializers provided by @cljimenez/json-serializer-base-serializers. You can use this package with @cljimenez/vue-localstorage-reactive or with other elements that requires the parse and serialize methods described in About the JsonSerializerAdapter methods. You must use the createJsonSerializerAdapter function to create a JsonSerializerAdapter object.
Example:
```
import { createJsonSerializerAdapter } from '@cljimenez/json-serializer-vue-localstorage-reactive'

// If you want to use the function serializer.
const JsonSerializerAdapterWithFunctionSerializer =
  createJsonSerializerAdapter({ includeFunctionSerializer: true })

// If you do not want to use the function serializer
const JsonSerializerAdapterWithoutFunctionSerializer =
  createJsonSerializerAdapter()
```
About the JsonSerializerAdapter methods
The JsonSerializerAdapter object provides the following methods:
- (method) getSerializers(void): Returns an object that contains the serializers added to JsonSerializer object. The keys are obtained from serializer.getSerializerType method and the values are the Serializer objects.
- (method) installSerializersAndRefreshJsonSerializer(serializersInstaller: SerializerInstaller, installOptions = {}): Adds serializers through the serializersInstaller and to update the JsonSerializer object.
- (method) addSerializerAndRefreshJsonSerializer(serializer): Adds a Serializer and to update the JsonSerializer object.
- (method) serialize(value, options = {}): Serializes the data. The optional options parameter contains some configuration used by the serialize algorithm.
- (method) parse(value, options = {}): Unserializes the data serialized by serialize method. The optional options parameter contains some configuration used by the parse algorithm.

How to use @cljimenez/json-serializer-vue-localstorage-reactive with @cljimenez/vue-localstorage-reactive

First you must install @cljimenez/vue-localstorage-reactive using:

npm install @cljimenez/vue-localstorage-reactive

Then, you can use it through the provide and inject functions.

Example:

// main.js
import { createJsonSerializerAdapter } from '@cljimenez/json-serializer-vue-localstorage-reactive'
import { createReactiveLocalStorageInstaller } from '@cljimenez/vue-localstorage-reactive'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

const serializer = createJsonSerializerAdapter({ includeFunctionSerializer: true })

app.use(createReactiveLocalStorageInstaller(), { serializer })

app.provide('reactiveLocalStorage', app.config.globalProperties.$reactiveLocalStorage)

app.mount('#app')

// App.vue
<script setup>
import { inject } from 'vue';

const reactiveLocalStorage = inject('reactiveLocalStorage')

const helloWord = reactiveLocalStorage.getItem('helloWord')

if (helloWord) {
  console.log('from localStorage')
  helloWord()
}

reactiveLocalStorage.setItem('helloWord', () => {
  console.log('hello word')
  console.log('using reactiveLocalStorage and jsonSerializerAdapter')
})

</script>

<template>
  <h1></h1>
</template>