Improve documents and examples for composition api store

[tuan-lm97]

What problem does this feature solve?

Currently, the document describe how to use composition api of vuex useStore is very limited.
None of the example show how to use useStore in .vue flies setup function and in js/ts files.

What does the proposed API look like?

To the very least, the examples must include useStore() examples, how to import and use them in .vue setup function and in .js/ts files

[kiaking]

I think it does? Following page have the exact example on how to use it in setup function.
https://next.vuex.vuejs.org/guide/composition-api.html

And this applies same to js/ts file. What made you confusing?

[tuan-lm97]

I think it does? Following page have the exact example on how to use it in setup function.
https://next.vuex.vuejs.org/guide/composition-api.html

And this applies same to js/ts file. What made you confusing?

By examples I mean the examples in this link ( quote from the docs )
https://github.com/vuejs/vuex/tree/4.0/examples/composition
There are 5 examples in this link, none of them use import useStore() from "vuex".

[cuebit]

@tuan-lm97 Every example has at least one usage of useStore.

1. Chat Example

• MessageSection.vue
• ThreadSection.vue

2. Counter Example

• Counter.vue

3. Counter Hot Example

• CounterControls.vue

4. Shopping Cart Example

• ProductList.vue
• ShoppingCart.vue

5. Todo Example

• App.vue
• TodoItem.vue

[tuan-lm97]

@cuebit @kiaking
Sorry, I mean usage of useStore inside js/ts files for reuse purpose.

I know it really silly, but before write this issue, I have wasted 30m figure it out why is useStore always return undefined for me.
My code is like the follow.

// myfile.ts
import { useStore } from "vuex"
export default {
    const myFunc = () => {
        const store = useStore();
        console.log(store)  // undefined
    }
    return { myFunc }
}

Now I know that the problems is because I don't call myFunc inside my setup function, instead I just return to use it in my template.

I know this is mostly because I don't understand how the composition work but it would be nice if there are some examples for beginner don't make silly mistake like this

[kiaking]

In that case I think it would make more sense to add that special note to the Docs's composition api page. That says "You must always call useStore inside setup hook". It's a bit redundant because this is not Vuex specific problem but it's about Vue Composition API in general. Though as you said I still think it makes sense to ave helpful note for new comers.

I'm not sure if we should force our example to use external ts/js file. Because it will make the code harder to read in my opinion. Examples should be as simple as possible. And it might give users impression that "you must separate file", or "separating file is a good practice". Which is not always true.

Also, even if we had that example, I think it's evenly hard to understand that the external function must be called inside setup hook just by looking into the example.

So following up the issue in the docs sounds like a good idea to me.

[pstaabp]

I would also add that at least one typescript example would be nice. I often have trouble getting the typing on the getters correct.

[tuan-lm97]

I would also add that at least one typescript example would be nice. I often have trouble getting the typing on the getters correct.

Yes, I also think example should have more variant, especially typescript related stuff. Vue 3 natively support typescript but on the document side, it haven't got enough love

[kinoli]

How about an example of using mapGetters within the setup function?

[cuebit]

@kinoli you wouldn’t use mapGetters in setup. See #1725

[willwinberg]

@cuebit @kiaking Sorry, I mean usage of useStore inside js/ts files for reuse purpose.

So what would be the proper way to do this? How should we handle using the store in files that aren't components?
It seems undesirable to mix import { useStore } from 'vuex in components and import store from 'vuex' in js/ts files throughout a project