Why use useStore() in vue 3 composition api?

Question

Can you please explain what is the reason to use useStore() function in vue 3 component (composition-api)?

I'm confused, because the direct import of the store is also works, e.g.:

<script setup>
import { store } from '@/store';

const foo = computed(() => store.getters['foo']); // works!
</script>

But a lot of the time I see people are using useStore() instead:

<script setup>
import { useStore } from 'vuex';

const store = useStore();

const foo = computed(() => store.getters['foo']); // also works well
</script>

Why? So far feels just as an extra line of code. I assume I'm missing something.

Thank you

---

Important update: I learned that useStore() needed if you are doing unit testing and want to mock the store.

Astrology

Answer 1

It is all about the newest store instance in composition API, as per docs:

We talk about how to retrieve the store in Vue 2 & Vuex 3 Project. Maybe you already have the answer, it's very easy, just use this.$store. But, We know about Composition API, Inside setup() this won't be a reference to the current active instance Since setup() is called before other component options are resolved.

documentation

Parisparish

Answer 2

Both methods can be used in composition api and both seem to work.

One part of this was answered by the author that useStore is needed for mocking the store during testing.

My opinion of why prefer one over the other:

1. when we import store from a local file, and you have lazy loaded your components/pages then upon building the project every component/page using this import will have the entire store code in those bundles increasing bundle size. importing useStore from vuex helps us avoid this.

2. It also helps us avoid circular imports in many cases, specially when you have util functions which use store, or vice-versa.

3. when using store with typescript, I noticed that we can send the root state interface to createStore. But, our store also consists of other modules and the typings for those cannot be given at this point. This interface which contains all store modules can be assigned to useStore.

Hence,

• store.getters.something => will be "any" if import store from '@/store'
• store.getters.something => will be "boolean" or an actual type when import { useStore } form 'vuex' is used.

something is a variable in another store module other than the root module.

NOTE: Point 1 is an assumption based on how imports work during bundling and Point 2 is tested in my own local project.

Prima

Answer 3

Also to add on to above answer:

When you use the useStore hook, the returned store instance is reactive. It means that any changes made to the state using mutations or actions will automatically trigger reactivity in the components that are using the state. This allows for seamless updates to the UI when the state changes.

Frecklefaced

answers should stand alone to answer the question without having to read other answers first. please rectify. – Eichhorn

The vuex useStore hook does nothing special to the returned store instance to make it reactive. It simply uses the store key (defaults to "store") and pulls the store object out of the context or app's provider store. – San