Composition API

To access the store within the setup hook, you can call the useStore function. This is the equivalent of retrieving this.$store within a component using the Option API.

  1. import { useStore } from 'vuex'
  3. export default {
  4.   setup () {
  5.     const store = useStore()
  6.   }
  7. }

Accessing State and Getters

In order to access state and getters, you will want to create computed references to retain reactivity. This is the equivalent of creating computed properties using the Option API.

  1. import { computed } from 'vue'
  2. import { useStore } from 'vuex'
  4. export default {
  5.   setup () {
  6.     const store = useStore()
  8.     return {
  9.       // access a state in computed function
  10.       count: computed(() => store.state.count),
  12.       // access a getter in computed function
  13.       double: computed(() => store.getters.double)
  14.     }
  15.   }
  16. }

Accessing Mutations and Actions

When accessing mutations and actions, you can simply provide the commit and dispatch function inside the setup hook.

  1. import { useStore } from 'vuex'
  3. export default {
  4.   setup () {
  5.     const store = useStore()
  7.     return {
  8.       // access a mutation
  9.       increment: () => store.commit('increment'),
  11.       // access an action
  12.       asyncIncrement: () => store.dispatch('asyncIncrement')
  13.     }
  14.   }
  15. }

Examples

Check out the Composition API example to see example applications utilising Vuex and Vue’s Composition API.