Vue Use Utilities

# useVuex

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
1
2
3
4
5
6
7
8
9

# Usage

useVuex utilities just similar with Vuex Component Binding Helpers (opens new window)

It export these composable helpers:

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?

# Example

💡 Tips

useVuex also allow you provide the namespace as first argument, then return will be the namespaced component binding helpers.

Open dev-tools you will find store printing.

import { useVuex, useStore } from '@vueblocks/vue-use-vuex'

export default {
  setup () {
    const store = useStore()
    console.log(store)
    const { useState, useGetters, useActions } = useVuex('counter')

    return {
      ...useState(['count']),

      ...useGetters([
        'evenOrOdd'
      ]),
      
      ...useActions([
        'increment',
        'decrement',
        'incrementIfOdd',
        'incrementAsync'
      ])
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 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;
};
1
2
3
4
5
6
7
8
9
10
11

← useStore →