# vuexl

> vuex local management module

Latest version **0.0.14** (published 2018-04-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuexl
pnpm add vuexl
yarn add vuexl
bun add vuexl
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2018-04-20 |
| First published | 2018-04-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 321.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | bichi |
| Maintainers | bichi |
| Keywords | runtime, typed, schema |

## Links

- npm: https://www.npmjs.com/package/vuexl
- Repository: https://github.com/bichikim/vuexl
- Homepage: https://github.com/bichikim/vuexl#readme
- Issues: https://github.com/bichikim/vuexl/issues
- npm.io page: https://npm.io/package/vuexl

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.5
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^6.2.0

## Alternatives

- [vest](https://npm.io/package/vest.md) — 50.1K weekly downloads
- [@regle/core](https://npm.io/package/@regle/core.md) — 47.0K weekly downloads
- [typeof-arguments](https://npm.io/package/typeof-arguments.md) — 12.5K weekly downloads
- [@lokalise/projects-engine-contracts](https://npm.io/package/@lokalise/projects-engine-contracts.md) — 978 weekly downloads
- [@osjwnpm/nam-laboriosam-quibusdam](https://npm.io/package/@osjwnpm/nam-laboriosam-quibusdam.md) — 70 weekly downloads

## Recent versions

- 0.0.14 (latest) — 2018-04-20
- 0.0.13 — 2018-04-11
- 0.0.12 — 2018-04-11
- 0.0.11 — 2018-04-11
- 0.0.10 — 2018-04-09
- 0.0.9 — 2018-04-09
- 0.0.8 — 2018-04-09
- 0.0.7 — 2018-04-08
- 0.0.6 — 2018-04-06

## README

# Vuexl
[![Build Status](https://travis-ci.org/bichikim/vuexl.svg?branch=master)](https://travis-ci.org/bichikim/vuexl)
> vuex management module\
## Feature
 - vuex typescript decorations
 - vuex mapHelpers
 - vuex local typescript decorations
 - vuex local mapHelpers
 
### Vuexl helpers
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
import {setLocalStore, mapLocalActions, mapLocalGetters, mapLocalState, mapLocalMutations} from './'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {}
})
const component = new Vue(setLocalStore(
  {
    store,
    methods: {
      ...mapLocalActions({
        increase: 'increase'
      }),
      ...mapLocalMutations({
        mIncrease: 'increase'
      }),
    },
    computed: {
      ...mapLocalGetters({
        oValue: 'oppositeValue'
      }),
      ...mapLocalState({
        value: 'value'
      }),
    }
  }, // vue
  {
    state: {
      value: 1,
    },
    actions: {
      increase({commit}) {
        commit('increase')
      }
    },
    getters: {
      oppositeValue(state){
        return state.value * -1
      }
    },
    mutations: {
      increase(state) {
        state.value += 1
      }
    }
  } // store
))
component.increase()
expect(component.value).to.equal(2)
component.mIncrease()
expect(component.oValue).to.equal(-3)
```
### Vuexl helpers
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
import Vuexl, {mapLocalActions, mapLocalGetters, mapLocalState, mapLocalMutations} from './src'
Vue.use(Vuex)
Vue.use(Vuexl)
const store = new Vuex.Store({
  state: {}
})
const component = new Vue({
  store,
  localStore() {
    return {
      store: {
        state: {
          value: 1,
        },
        actions: {
          increase({commit}) {
            commit('increase')
          }
        },
        getters: {
          oppositeValue(state){
            return state.value * -1
          }
        },
        mutations: {
          increase(state) {
            state.value += 1
          }
        }
      }
    }
  },
  methods: {
    ...mapLocalActions({
      increase: 'increase'
    }),
    ...mapLocalMutations({
      mIncrease: 'increase'
    }),
  },
  computed: {
    ...mapLocalGetters({
      oValue: 'oppositeValue'
    }),
    ...mapLocalState({
      value: 'value'
    }),
  }
})
component.increase()
expect(component.value).to.equal(2)
component.mIncrease()
expect(component.oValue).to.equal(-3)
```
### Vuexl decorators
```typescript
import Vue from 'vue'
import Vuex from 'vuex'
import {expect} from 'chai'
import Vuexl, {
  LocalAction,
  LocalStore,
  LocalState,
  LocalMutation,
  LocalGetter,
} from './src'
import {Component} from 'vue-property-decorator'
Vue.use(Vuex)
Vue.use(Vuexl)

@Component
class VuexlComponent extends Vue {
  @LocalState value: number
  @LocalGetter opposite: number
  @LocalMutation('increase') mutIncrease: () => void
  @LocalAction increase: () => void
  @LocalStore({
     state: {value: 1},
     getters: {
       opposite(state) {
         return state.value * -1
       }
     },
     actions: {
       increase({commit}){
         commit('increase')
       }
     },
     mutations: {
       increase(state){
         state.value += 1
       }
     }
  }) VuexlName: string
}
const component = new VuexlComponent()
component.increase()
expect(component.value).to.equal(2)
component.mutIncrease()
expect(component.opposite).to.equal(-3)
```
### Options
#### Options.name
>in case of having local root name\

way to use
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
import Vuexl from './src'
Vue.use(Vuex)
Vue.use(Vuexl, {name: 'myLocalName'})
```

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