Documenting common Vuex patterns

[kawazoe]

What problem does this feature solve?

An interesting feature of Redux's documentation is their section on Fundamentals and Standard Patterns. While Vuex have a great API reference and guides to help users use this API, we are left to experiment with Vuex for everything higher-level. For instance:

• What are good ways to handle the loading state of asynchronous actions?
• What about errors? Can we store instances of Error in the state?
• Can we store functions in the state?
• How can we deal with data that expires or needs refreshing either periodically or on read?
• Are getters that returns a promise a good idea?
• Is a side effects pattern like in @ngrx/effects by using subscribe a good idea or is it conflicting with "the Vuex way" of doing things?
• What about performance? Are there some best practices to respect to keep it fast?
• What about normalization of data? Any patterns to help with this?
• Are configurable modules created via a factory function a good idea? How does it play with using a function to declare the state?

By reading the doc, you can find some answers to those questions but they are often buried down in examples to the existing reference instead of surfaced in a nice section similar to Redux's documentation. These are all questions that are mostly left with either unclear answers or would require experimentation on the user's side, while I feel like they should all have been answered already.

For my part, most of my experience has been with NgRx, and while I have used Vuex in the past, I can't stop thinking that I might have used it in a terribly wrong manner.

What does the proposed API look like?

I wish to see an additional section added to the Vuex's guides. Something that is less about what API to use and more about why and how you want to use this API. A good first candidate to move over there is the Advanced > Form Handling section which already talk about "the Vuex way" of doing things. Then, I would love to see similar examples posted for the various questions I mentioned above. All things that would benefit to be, if not standardized, at least suggested as patterns that people could start to expect to see in Vuex applications.

I would gladly provide some answers to those questions by myself, but like I mentioned already, I found most of them through experimentation and I honestly don't feel like I would recommend most if not any of my answers to someone else... (which is just one more reason to have a central place for those patterns, really...)

Just looking around, the idea of standardizing how various things gave rise to multiple interesting projects within Redux, like the flux standard action, and then redux-actions, redux-promise and redux-rx or redux-toolkit. I expect such documentation could probably spur some similar efforts in Vuex, or at least help point out some existing third party efforts that might be good solutions to those common problems.

[f-t-alves]

I would love to see more examples of how Vuex works too, especially with TypeScript

[I-Want-ToBelieve]

Need more examples of using typescript with vue4.x in the documentation