Use Vuex With Composition API Helpers
Tags: vue2, vue3, composition, vuex
Published: 2020-12-10 14:45:14

---
title: Use Vuex With Composition API Helpers
published: true
description: Recently, I'm focus on build a new wheel, I implement [useXXX helpers](https://github.com/vuejs/vuex/issues/1725) for Vuex
tags: Vue2, Vue3, composition, Vuex
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/6c1x062vmb8fexuwqcw3.png
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6c1x062vmb8fexuwqcw3.png)

Recently, I'm focus on build a new wheel, I implement [useXXX helpers](https://github.com/vuejs/vuex/issues/1725) 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](https://next.vuex.vuejs.org/guide/composition-api.html)

### Usage

#### useState

```js
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

```js
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

```js
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

```js
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

```js
// 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'
      ])
    }
  }
}
```

It seems familiar right?  Yeah, You could think of `@vueblocks/vue-use-vuex` as a wrapper of `Vuex Helpers`

[Read Docs](https://vue-use-utilities.vercel.app/guide/vuex/useVuex.html)

But, I'm didn't think too much about type safety, and i am still learning TypeScript. If you're interested it, Please help me improve it.

PRs Welcome in [@vueblocks/vue-use-utilities](https://github.com/vueblocks/vue-use-utilities)