Posted on Dec 10, 2020

Use Vuex With Composition API Helpers

Recently, I'm focus on build a new wheel, I implement useXXX helpers for Vuex, and I'm consider about to contribute in Vuex, then i found that, the useXXX helpers proposal already exist nearly eight months.

checkout https://github.com/vueblocks/vue-use-utilities#vuex

@vueblocks/vue-use-vuex - Use Vuex With Composition API Easily. It build on top of vue-demi & @vue/compostion-api. It works both for Vue 2 & 3, TypeScript Supported too.

useVuex

useState - same as mapState
useGetters - same as mapGetters
useMutations - same as mapMutations
useActions - same as mapActions

useStore

useStore - same as Vuex 4.x composition api useStore

Usage

useState

import { useVuex } from '@vueblocks/vue-use-vuex' export default { // ... setup () { // Use the useState as you would use mapState const { useState } = useVuex() return { // mix this into the outer object with the object spread operator ...useState({ // arrow functions can make the code very succinct! count: state => state.count, // passing the string value 'count' is same as `state => state.count` countAlias: 'count', // to access local state with `this`, a normal function must be used countPlusLocalState (state) { return state.count + this.localCount } }), ...mapState([ // map count<ComputedRef> to store.state.count 'count' ]) } } }

useGetters

import { useVuex } from '@vueblocks/vue-use-vuex' export default { // ... setup () { // Use the useGetters as you would use mapGetters const { useGetters } = useVuex() return { // mix the getters into outer object with the object spread operator ...useGetters([ 'doneTodosCount', 'anotherGetter', // ... ]), // if you want to map a getter to a different name, use an object: ...mapGetters({ // map `doneCount<ComputedRef>` to `this.$store.getters.doneTodosCount` doneCount: 'doneTodosCount' }) } } }

useMutations

import { useVuex } from '@vueblocks/vue-use-vuex' export default { // ... setup () { // Use the useMutations as you would use mapMutations const { useMutations } = useVuex() return { ...useMutations([ 'increment', // map `increment()` to `this.$store.commit('increment')` // `mapMutations` also supports payloads: 'incrementBy' // map `incrementBy(amount)` to `this.$store.commit('incrementBy', amount)` ]), ...useMutations({ add: 'increment' // map `add()` to `this.$store.commit('increment')` }) } } }

useActions

import { useVuex } from '@vueblocks/vue-use-vuex' export default { // ... setup () { // Use the useActions as you would use mapActions const { useActions } = useVuex() return { ...useActions([ 'increment', // map `increment()` to `this.$store.dispatch('increment')` // `mapActions` also supports payloads: 'incrementBy' // map `incrementBy(amount)` to `this.$store.dispatch('incrementBy', amount)` ]), ...useActions({ add: 'increment' // map `add()` to `this.$store.dispatch('increment')` }) } } }

namespacing

also support

// Get namespaced component binding helpers in useVuex import { useVuex } from '@vueblocks/vue-use-vuex' export default { setup () { const { mapState, mapActions } = useVuex('some/nested/module') return { // look up in `some/nested/module` ...mapState({ a: state => state.a, b: state => state.b }) // look up in `some/nested/module` ...mapActions([ 'foo', 'bar' ]) } } }