vuex-typescript | simple way to make Vuex type | State Container library
kandi X-RAY | vuex-typescript Summary
kandi X-RAY | vuex-typescript Summary
A simple way to make Vuex type-safe with intuitive intellisense
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of vuex-typescript
vuex-typescript Key Features
vuex-typescript Examples and Code Snippets
Community Discussions
Trending Discussions on vuex-typescript
QUESTION
I am trying to create a generic type which will prove typing hints for Vuex
mutation. I read this article Vuex + TypeScript and I get inspired to create something more generic. I came up with something like this:
ANSWER
Answered 2020-Dec-05 at 10:35Actually, it is possible. It takes me some time to figure out what I am doing wrong but in the end I understood my mistake.
My first mistake was inside DiceStoreMutation
because my 3rd argument of this generic referred to type of the key no key name. The proof of this we can see on attached screenshot:
We can see that Expanded shows that p
is actually a string, but it should be a union of string Literals 'ADD_DICE_HISTORY_ITEM' | 'DECREMENT_ROUND' | 'INCREMENT_SCORE'
. You could think that maybe I just should use keyof DiceGameMutationsKeys
instead of keyof typeof DiceGameMutationsKeys
which will refer to keys names of this interface instead of types of keys, but this of course occurred an error as expected. It made me think that I should change my generic MutationType
somehow. After I read @Joel Bourbonnais answers and check this very good example about the P[K]
part being a Index types
. I came up with a new idea for my MutationType
: Mapped generics
+ Index types
.
This new type came up with this shape:
QUESTION
I'm currently learning Vue, Vuex and TypeScript and I must say I'm kinda confused about how to setup a Vuex store correctly. The documentation doesn't cover a TypeScript implementation at all (I have the feeling that documentation in general lacks fundamental TypeScript examples?) what made me (again!) look for solutions on other pages outside the official documentation (which imho shouldn't happen if a new technology is learned directly via the official resources as it should contain all the information necessary to get the technology working, right?!).
So when I looked in the world wide web for solutions, I came across the following patterns:
On bezkoder.com they use decorators from
vuex-module-decorators
to define the Vuex store modules as classes. Then, they use decorators again, but this time fromvuex-class
, to access the respective states, mutations and actions from their Vue components. This solution seems to be very "TypeScripty" as they make use of classes and decorators like in the official Vue TypeScript documentation.On itnext.io (a Medium.com site) they use a so called "direct store" with
direct-vuex
. Here, they define the store itself in a more "JavaScripty" way, as all the states, mutations and actions are passed to the store instance as plain objects.On dev.to and codeburst.io (another Medium.com site) they use plain TypeScript features to create their store. They therefore setup a lot of constants
enums
andstrings
and define severalinterfaces
in a bunch of different files which are then all exported and imported again to index file of each module which then creates the respective Vuex module. This solution is somehow a mix of a "TypeScripty" and "JavaScripty" solution. It seems like that this method creates the most boilerplate code.
So now, as a Vue beginner, I'm kinda confused and I have the following questions:
- Which method (1, 2 or 3 or is there maybe another one?) should I prefer and why? What are the advantages and the disadvantages of these methods? (I searched for a comparison of the different approaches but I couldn't find anything.)
- Should I use plugins which aren't maintained by the official Vue team? How can I be sure that these plugins will get updated to work with future Vue releases? (For example in the GitHub repo from
vuex-module-decorators
the author explicitly says, that the plugin is just a side project of him what makes me doubt that the plugin will get long term updates.) - Why isn't there anything about that in the official documentation? Why is the official documentation lacking so much TypeScript examples? Is there a place where I can find reliable TypeScript example and solutions to the must common scenarios?
ANSWER
Answered 2020-Sep-21 at 18:25i'm not allowed to comment, so i need to answer, but i also can't answer all your questions... I was in a similar situation. And am now using vuex-module-decorators. This feels, as you wrote, very typescipty and the setup was rather simple, the usage is so too.
As I have to update my code quite often and eventually update Vue.js etc... I took the risk to use this (big) dependency, knowing that i maybe have to rebuilt my stuff at some point. But using vuex-module-decorators safed me alot of time and almost never got me any problems. I don't know the other solutions but this feels to me very natural to vue and typescript.
I hope the will help
Best regards
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install vuex-typescript
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page