# @yoonit/yoox-store-js

> The official Cyberlabs Javascript global store library.

Latest version **0.0.1-alpha.9** (published 2021-11-08) · 0 weekly downloads

## Install

```sh
npm install @yoonit/yoox-store-js
pnpm add @yoonit/yoox-store-js
yarn add @yoonit/yoox-store-js
bun add @yoonit/yoox-store-js
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-alpha.9 |
| Published | 2021-11-08 |
| First published | 2021-08-26 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 64.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | luiguild, sabrinaas, inando85, ___moraes, gabemule, gabriel_rizzo, ronalson, teruyaharoldo, 7i4g0, goulartvic, vitoriacosta |
| Keywords | store, manage, global |

## Links

- npm: https://www.npmjs.com/package/@yoonit/yoox-store-js
- npm.io page: https://npm.io/package/@yoonit/yoox-store-js

## Dependencies (2)

- [rxjs](https://npm.io/package/rxjs.md) ^6.6.6
- [pouchdb](https://npm.io/package/pouchdb.md) ^7.2.2

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 0.0.1-alpha.9 (latest) — 2021-11-08
- 0.0.1-alpha.8 — 2021-09-21
- 0.0.1-alpha.7 — 2021-09-10
- 0.0.1-alpha.6 — 2021-09-06
- 0.0.1-alpha.5 — 2021-08-31
- 0.0.1-alpha.3 — 2021-08-26
- 0.0.1-alpha.2 — 2021-08-26

## README

# Yoox

## How to install
``
npm install @yoonit/yoox-store-js
``

## How to use
```
import Yoox from @yoonit/yoox
import yourStore from './yourstore'

const myStore = Yoox.store(yourStore, { persist: true, onLoad: hideLoad })
```

## Store object
It's only needed to create an object with keys: set, get, mix and state.
<br>

Ie: 
```
{
   state:{
      user:{
         name:'',
         age:''
      }
   },
   set:{
      'userPersonalData':function ({
         mix
      },
      user){
         mix('userPersonalData',
         user)
      }
   },
   get:{
      'userPersonalData':function ({
         state
      }){
         return state.user
      }
   },
   mix:{
      'userPersonalData':function (state,
      {
         payload
      }){
         state.user = payload

      return state
      }
   }
}
```

Or if you wish, you can use as a modularized store as:

```
{
   office:{
      state:{
         name:''
      },
      set:{
         'officeData':function ({
            mix
         },
         user){
            mix('office/officeData',
            user)
         }
      },
      get:{
         'data':function ({
            state
         }){
            return state
         }
      },
      mix:{
         'officeData':function (state,
         {
            payload
         }){
            state.office.name = payload.name

        return state
         }
      }
   },
   user:{
      state:{
         name:'',
         age:''
      },
      set:{
         'personalData':function ({
            mix
         },
         user){
            mix('user/personalData',
            user)
         },
         'changeName':function ({
            set,
            get
         },
         userName){
            const user ={
               ...get('user/personalData')
            }user.name = userName
        set('user/personalData',
            user)
         }
      },
      get:{
         'personalData':function ({
            state
         }){
            return state
         }
      },
      mix:{
         'personalData':function (state,
         {
            payload
         }){
            state.user.name = payload.name
        state.user.age = payload.age

        return state
         }
      }
   }
```

When modularized, all methods will have the module prefix.
Ie: PerseService.get('user/personalData')

## Exported Methods

- set('module/setterName') => ({ mix, set, get}, payload): Method that can be async. You should place your logic here, like http calls.

- get('module/getterName') => ({ store, rootStore }): Retrieve data from store state. `store` key returns data from module, and if there is no module
returns all data. `rootStore` returns all data from store, only available when store is modularized.

- mix('module/mixerName') => (state, { action, payload }): Mutate store data. Returns all data from store, where you can mutate it (it's the impure store part).


## Persist Param

- If you need some persist data, to improve app performance or to another objective.
It's only necessary to pass { persist: true } to the second parameter on store, and it works like a charm.
  
- Persisted data is always returned on getters, when store is reinitialized.

- When there is a change on store modules, persisted data is reseted, to not cause trouble with wrong store structure.

- It's highly recommended to use onLoad method to guarantee that persisted data have been loaded to Yoox state. Ie: Show load until onLoad callback is called.

## Vue Plugin

If you are using Vue 2:

````
// main.js

import { VueInstall } from '@yoonit/perse-sdk-js'
import myStore from '../yoox'

Vue.use(VueInstall, myStore)

// Inside project

this.$Yoox.set('userData', user)

````

If you are using Vue 3:

````
// main.js

import { VueNextInstall } from '@yoonit/perse-sdk-js'
import myStore from '../yoox'

createApp(App).use(VueNextInstall, myStore)

// Inside project. It's important to notice that there is no '$' on vue 3 global variable

this.__Yoox.set('userData', user)
````

---
_Source: https://npm.io/package/@yoonit/yoox-store-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._