Open tuan-lm97 opened 3 years ago
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?
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"
.
@tuan-lm97 Every example has at least one usage of useStore
.
@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
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.
I would also add that at least one typescript example would be nice. I often have trouble getting the typing on the getters correct.
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
How about an example of using mapGetters within the setup function?
@kinoli you wouldn’t use mapGetters in setup. See #1725
@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
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