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

🏠 Homepage

Index

• Install
• How to use?
  • Obtain the JsonSerializerAdapter object
  • About the JsonSerializerAdapter methods
  • How to use @cljimenez/json-serializer-vue-localstorage-reactive with @cljimenez/vue-localstorage-reactive
• Author
• Contributing
• License

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>

Author

👤 Cristopher Jiménez

• Github: @cristopher1

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page.

📝 License

Copyright © 2023 Cristopher Jiménez. This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator