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

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

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

const foo = puted(() => 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 = puted(() => 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.

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

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

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

const foo = puted(() => 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 = puted(() => 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.

• javascript
• vue.js
• vuejs3
• vuex
• vue-position-api

3 Answers 3

Both methods can be used in position 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 ponents/pages then upon building the project every ponent/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.

It is all about the newest store instance in position 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 ponent options are resolved.

documentation

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 ponents that are using the state. This allows for seamless updates to the UI when the state changes.