# @vueblocks/vue-use-vuex

> Use Vuex With Composition API Easily.

## Install

```bash
# Vue 2 with @vue/composition-api
yarn add @vue/composition-api @vueblocks/vue-use-vuex -S
or
npm i @vue/composition-api @vueblocks/vue-use-vuex -S

# Vue 3
yarn add @vueblocks/vue-use-vuex -S
or
npm i @vueblocks/vue-use-vuex -S
```

## Usage

### useVuex

`useVuex` utilities just similar with [Vuex Component Binding Helpers](https://vuex.vuejs.org/api/#component-binding-helpers)

It export these composable helpers:

* [useState](./useState.md) - same as `mapState` helper in Vuex
* [useGetters](./useGetters.md) - same as `mapGetters` helper in Vuex
* [useMutations](./useMutations.md) - same as `mapMutations` helper in Vuex
* [useActions](./useActions.md) - same as `mapActions` helper in Vuex

Differently, `useVuex` do not export `createNamespacedHelpers` function, Instead `useVuex` allow you provide
the namespace as first argument, then return will be the namespaced component binding helpers.

Read more about namespacing [documention](./namespacing.md).

### useStore

`useStore` utilities just do the same thing with Vuex 4.x composition api [useStore](https://next.vuex.vuejs.org/guide/composition-api.html)

It seems familiar right?

## Typing

```ts
/**
 * Get $store from current instance
 * @return {Store} vm.$store
 */
declare const useStore: () => Store<any>;
/**
 * Use Vuex with composition api easily. Both support Vue2.x / Vue3.x
 * @param {String} namespace
 * @param {Store} store ### vm.$store
 */
declare function useVuex(namespace?: string, store?: Store<any>): {
  useState: (namespace?: string, map: Array<string> | Object<string | function>) => Object<ComputedRef>
  useGetters: (namespace?: string, map: Array<string> | Object<string>) => Object<ComputedRef>
  useMutations: (namespace?: string, map: Array<string> | Object<string | function>) => Object
  useActions: (namespace?: string, map: Array<string> | Object<string | function>) => Object
};
```