direct-vuex | Vuex store with TypeScript types | State Container library
kandi X-RAY | direct-vuex Summary
kandi X-RAY | direct-vuex Summary
Use and implement your Vuex store with TypeScript types. Direct-vuex doesn't require classes, therefore it is compatible with the Vue 3 composition API.
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 direct-vuex
direct-vuex Key Features
direct-vuex Examples and Code Snippets
Community Discussions
Trending Discussions on direct-vuex
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
QUESTION
I'm using direct-vuex
package to define the store for Vuejs+Typescript. I have this error when trying to define Getters:
'userGetters' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.ts(7022)
I can access store.getters.canUpdateUsers
from my component but the getter is just executed one time and the type of getters
is any. This is the exact type of store.getters
:
ANSWER
Answered 2020-Jun-25 at 04:55As mentioned in the document, the return type of getters should be declared explicitly when using moduleGetterContext:
Types in the context of actions implies that TypeScript should never infer the return type of an action from the context of the action. Indeed, this kind of typing would be recursive, since the context includes the return value of the action. When this happens, TypeScript passes the whole context to any. Tl;dr; Declare the return type of actions where it exists!
For the same reason, declare the return type of getters each time a getter context generated by moduleGetterContext is used!
https://github.com/paroi-tech/direct-vuex#in-a-vuex-module
This is the fixed code:
QUESTION
If I design my component like this:
...ANSWER
Answered 2020-Mar-03 at 02:11count: store.getters.count
means that you're storing the current value of store.getters.count
as the default value of your state count
.
That means it won't be reactive. Notice that count
in the store is a function.
You could try making your state count
a computed property instead so it would properly update.
I haven't tried the Composition API yet, but I hope I could help.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install direct-vuex
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