@vueblocks/vue-use-vuex
Version:
Use Vuex With Composition API Easily.
63 lines (46 loc) • 1.98 kB
Markdown
# /vue-use-vuex
> Use Vuex With Composition API Easily.
## Install
```bash
# Vue 2 with /composition-api
yarn add /composition-api @vueblocks/vue-use-vuex -S
or
npm i /composition-api @vueblocks/vue-use-vuex -S
# Vue 3
yarn add /vue-use-vuex -S
or
npm i /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
};
```