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.

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
  }
}

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.

import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()

    return {
      // access a state in computed function
      count: computed(() => store.state.count),

      // access a getter in computed function
      double: computed(() => store.getters.double)
    }
  }
}

Accessing Mutations and Actions

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

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()

    return {
      // access a mutation
      increment: () => store.commit('increment'),

      // access an action
      asyncIncrement: () => store.dispatch('asyncIncrement')
    }
  }
}

Examples

Check out the Composition API example to see example applications utilizing Vuex and Vue's Composition API.

Application Structure

Plugins