@vueblocks/vue-use-vuex

Use Vuex With Composition API Easily.

Install

# 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

It export these composable helpers:

• useState - same as mapState helper in Vuex
• useGetters - same as mapGetters helper in Vuex
• useMutations - same as mapMutations helper in Vuex
• useActions - 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.

useStore

useStore utilities just do the same thing with Vuex 4.x composition api useStore

It seems familiar right?

Typing

/**
 * 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
};