Add Vuex typescript recipe example #61
Conversation
recipes/typescript.md
Outdated
| <details><summary>Vuex client</summary> | ||
|
|
||
| ```ts | ||
| type State = number |
There was a problem hiding this comment.
Let’s use a more real example of having object in the state.
There was a problem hiding this comment.
I reduced code to be like Redux example 🤦🏻♀️
There was a problem hiding this comment.
Yeap, I will update Redux example too. I did the same mistake.
There was a problem hiding this comment.
Let’s wait for new Redux example to have the same store in the Vuex example
recipes/typescript.md
Outdated
| let store = new Logux.Store<State>({ | ||
| state: 0, | ||
| mutations: { | ||
| increment (state) { |
There was a problem hiding this comment.
We need an example of mutation with parameters
recipes/typescript.md
Outdated
| } | ||
| }) | ||
|
|
||
| store.commit.sync<IncrementMutation>({ type: 'increment' }) |
There was a problem hiding this comment.
Why do we need IncrementMutation template here?
Can we pass available actions to the Logux.Store to check types in commit.sync? It will dramatically reduce code size.
There was a problem hiding this comment.
I was looking for solution with @nikolay-govorov. We can use decorators or something like vuex-type-helper. I haven't tried that. It seems redundant.
There was a problem hiding this comment.
My solution I took from Vuex's issue.
There was a problem hiding this comment.
Note that this is not a problem with the @logux/vuex binding, but with the Vuex itself. In Vuex v4, deeper support for TS is expected, and I believe it will be possible to type not only the state but also the signatures of actions.
There was a problem hiding this comment.
Here is fixed Redux example 2609816
I think passing IncrementMutation to store.commit.sync does not any useful. It will be better just recommend some good action creator library.
|
I made example like Redux and simplified it. We'll improve it in the near future, as discussed. |
|
@ai, can be merged, I think. |
Resolve logux/vuex#7
Only this way you can use TS in Vuex 3 without decorators or other modules. Other ways are too specific. That's should be enough for today's documentation.