How to access Vuex store in Vue setup() method?

Question

How do I access the Vuex store in Vue when using the setup() method?

I don't have access to the regular this.$store variable anymore.

ProfDFrancis · Accepted Answer · 2023-12-31 10:53:01Z

15

According to the composition API documentation you have to use the following syntax:

import { computed } from 'vue' // If not already imported
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)
    }
  }
}

edited Dec 31, 2023 at 10:53

ProfDFrancis

9,4071 gold badge23 silver badges33 bronze badges

answered Aug 18, 2021 at 18:53

marcuse

4,0595 gold badges36 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Md. A. Apu Over a year ago

How to do it in vue 2.7 (with composition API)?

scandar Over a year ago

@Md.A.Apu This should do the trick ` <script setup> ... import store and other deps const store = useStore(); const count = computed(() => store.state.count); etc... </script> `

Steve L Over a year ago

Note that you may need to add import { computed } from 'vue' just below the import of { useStore }, otherwise it throws an error on the use of the computed keyword.

Collectives™ on Stack Overflow

How to access Vuex store in Vue setup() method?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related