https://github.com/cristopher1/json-serializer-vue-localstorage-reactive
Wrapper to use @cljimenez/json-serializer-core and @cljimenez/json-serializer-base-serializers with @cljimenez/vue-localstorage-reactive
https://github.com/cristopher1/json-serializer-vue-localstorage-reactive
Last synced: 5 months ago
JSON representation
Wrapper to use @cljimenez/json-serializer-core and @cljimenez/json-serializer-base-serializers with @cljimenez/vue-localstorage-reactive
- Host: GitHub
- URL: https://github.com/cristopher1/json-serializer-vue-localstorage-reactive
- Owner: cristopher1
- License: mit
- Created: 2023-10-27T22:09:02.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-18T18:59:29.000Z (almost 2 years ago)
- Last Synced: 2025-11-23T02:17:12.261Z (7 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@cljimenez/json-serializer-vue-localstorage-reactive
- Size: 373 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Welcome to @cljimenez/json-serializer-vue-localstorage-reactive 👋
> Wrapper to use @cljimenez/json-serializer-core and @cljimenez/json-serializer-base-serializers with @cljimenez/vue-localstorage-reactive
### 🏠 [Homepage](https://github.com/cristopher1/json-serializer-vue-localstorage-reactive#readme)
### [Index](#index)
- [Install](#install)
- [How to use?](#how-to-use?)
- [Obtain the JsonSerializerAdapter object](#obtain-json-serializer-adapter-object)
- [About the JsonSerializerAdapter methods](#json-serializer-adapter-interface)
- [How to use @cljimenez/json-serializer-vue-localstorage-reactive with @cljimenez/vue-localstorage-reactive](#json-serializer-adapter-with-reactive-local-storage)
- [Author](#author)
- [Contributing](#contributing)
- [License](#license)
## Install
```sh
@cljimenez/json-serializer-vue-localstorage-reactive
```
- ### 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](#json-serializer-adapter-interface). You must use the `createJsonSerializerAdapter` function to create a JsonSerializerAdapter object.
Example:
```js
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](https://www.npmjs.com/package/@cljimenez/vue-localstorage-reactive) using:
```sh
npm install @cljimenez/vue-localstorage-reactive
```
Then, you can use it through the provide and inject functions.
Example:
```js
// 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
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')
})
```
👤 **Cristopher Jiménez**
- Github: [@cristopher1](https://github.com/cristopher1)
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/cristopher1/json-serializer-vue-localstorage-reactive/issues).
Copyright © 2023 [Cristopher Jiménez](https://github.com/cristopher1).
This project is [MIT](https://github.com/cristopher1/json-serializer-vue-localstorage-reactive/blob/master/LICENSE) licensed.
---
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_