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.