@vueblocks/vue-use-vuex

@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 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.

It seems familiar right?

Typing

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

Changelog

0.1.9 (2020-12-08)

Features

• vuex: check namespace is string or not (b9aba78)
• vuex: export useStore hooks (387ae98)
• vuex: keep typescript type safety (0ed309e)