Vue Tutorial: Using Vuex with TypeScript

[@undefined418]

Very Very helpful, I came from VueJS without Typescript, and Vuex got me going again. This video made me help understand not only Vuex again, but also Typescript. Thank you!

[@OverSeasMedia]

I am glad this was helpful

[@mustafa_sakalli]

this tutorial really dope dude! Other giant tech channels just copy pasting throughout the video but you give the idea and implementation literally 'hands-on'. Big kudos!

[@josemanuelrocarodriguez2325]

you saved me a week, one of the best resources I could find about this topic

[@OverSeasMedia]

I'm really glad this was actually helpful to someone, cheers mate :)

[@dennisgonzales9521]

thanks for the tutorial I literally learned VUE, VUEX with Typescript in one day!

[@jegedeayodeji3306]

Simple, short and straight to the point. Thanks man!

[@zeropublix]

Thanks alot for this video. I wasn't able to add proper typings to my vuex store and i couldn't find any good guides. I was now able to resolve that

[@QuentinWatt]

Did you only provide the starting code in the repo?

[@lazrus_lobo]

love it the way you make the code

[@adelhishem1]

Welcome back! long time no see.

[@OverSeasMedia]

Thank you my dude :)

[@LordY971]

Such a great video. I was looking for explanations and I got it all!!! thx man

[@abdulmelikbekmez7765]

So much valuable content. Nice work

[@MaxSeipio]

Hey, simple and well explained. thanks

[@adityakadam2256]

amazing video. You saved my day. Thanks :)

[@aliabbasi6359]

Hello guys. I have a problem with using mapstate in typescript. Can any one help me? How should I define state type in mapstate object inside computed??

[@vitiok78]

Very helpful video! Great! Actually you can go a little bit further and make your modules namespaced. It will have a great benefit when your state, actions, getters and mutations have the same name in different modules. Like in CRUD, for example.

[@Chryst1anFRz]

This part of the code shown at 17:46 doesnt work. mounted: { setTimeout( () => { this.username = "Changed heheheh" }, 3000) } Syntax Error: C:\Projetos\Vue\Aprendizado\vue_ts\src\App.vue: Unexpected token I tried doing this: setTimeout({ ... }, 3000) but it also says theres errors in my code. This is my package.json: { "name": "vue_ts", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11", "vue-class-component": "^7.2.3", "vue-property-decorator": "^9.1.2", "vue-router": "^3.2.0", "vuex": "^3.4.0" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^2.33.0", "@typescript-eslint/parser": "^2.33.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/eslint-config-typescript": "^5.0.2", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "typescript": "~3.9.3", "vue-template-compiler": "^2.6.11" } } Do you have any tips?

[@Chryst1anFRz]

Had to do this: mounted: { randomMethodName() { setTimeout( () => { console.log("21") }, 3000) } }

[@Chryst1anFRz]

That still doesnt work... I give up ERROR in C:/Projetos/Vue/Aprendizado/vue_ts/src/main.ts(11,18): 11:18 No overload matches this call. Overload 1 of 2, '(tag?: string | VueConstructor | AsyncComponentPromise | AsyncComponentFactory | FunctionalComponentOptions | ComponentOptions | (() => Component) | undefined, children?: VNodeChildren): VNode', gave the following error. Argument of type '{ name: string; components: {}; computed: { helloMessage: { get(): any; }; username: { get(): any; set(value: any): void; }; }; mounted: { dumb(): void; }; }' is not assignable to parameter of type 'string | VueConstructor | AsyncComponentPromise | AsyncComponentFactory | FunctionalComponentOptions | ComponentOptions | (() => Component) | undefined'. Type '{ name: string; components: {}; computed: { helloMessage: { get(): any; }; username: { get(): any; set(value: any): void; }; }; mounted: { dumb(): void; }; }' is not assignable to type 'ComponentOptions'. Types of property 'mounted' are incompatible. Type '{ dumb(): void; }' is not assignable to type '() => void'. Type '{ dumb(): void; }' provides no match for the signature '(): void'. Overload 2 of 2, '(tag?: string | VueConstructor | AsyncComponentPromise | AsyncComponentFactory | FunctionalComponentOptions | ComponentOptions | (() => Component) | undefined, data?: VNodeData | undefined, children?: VNodeChildren): VNode', gave the following error. Argument of type '{ name: string; components: {}; computed: { helloMessage: { get(): any; }; username: { get(): any; set(value: any): void; }; }; mounted: { dumb(): void; }; }' is not assignable to parameter of type 'string | VueConstructor | AsyncComponentPromise | AsyncComponentFactory | FunctionalComponentOptions | ComponentOptions | (() => Component) | undefined'. Type '{ name: string; components: {}; computed: { helloMessage: { get(): any; }; username: { get(): any; set(value: any): void; }; }; mounted: { dumb(): void; }; }' is not assignable to type 'ComponentOptions'. 9 | router, 10 | store, > 11 | render: h => h(App) | ^ 12 | }).$mount('#app') 13 | Version: typescript 3.9.9 Time: 122ms

[@ICSVortex-DCS]

And thank for code and terminal size. I chexk videos on my rog phone 3. Very pleasant for my eyes

[@OverSeasMedia]

I did not actually knew anyone would watch this on a small size screen . From now on I will try to make the font as big as possible. Thanks mate for the comment :)

[@ICSVortex-DCS]

@@OverSeasMedia orcourse, people are watching a lot i think))) especially, devs in bed 🛌

[@PabloGnesutta]

Great tutorial man!! It would be great if the repo you linked was actually what you showed, but it is basically a boilerplate project. Thanks anyway!

[@Yorgarazgreece]

I love how he randomly curses when theres a fuckup hahahahaha insta-subbed

[@DhiaMagicien]

Finally a new video :D Welcome back bro

[@OverSeasMedia]

Ayyyeee thanks mate :))

[@TheReaper215]

Can you share the github repo please ^^

[@МатвейДенисов-т2к]

great video man

[@Rmoore08]

Is there anyway I can download the code?

[@FranciscoMendoza-xu3if]

Very useful video

[@jbuist]

Great tutorial! That's everything I need to know to get TS and Vuex going as a complete newcomer. Only problem I had: The github repo is, uh, blank. It looks like a stock Vue project to me. None of the video code was in there.

[@GuardianOfAbyss]

I also wanted to take a look of the final product but the repo is empty. Anyway, great video.

[@fatih.tavukcu]

Yeah, sadly he forgot to push his changes :(

[@aliabbasi6359]

Thank you. It was great

[@JanKowalski-dm1mt]

We missed you !

[@ICSVortex-DCS]

Great stuff bro, thx. Typescript is a cool shit)))

[@Anandhanedom]

Thanks for the share!

[@toufik4044]

iwa 3la slamtek, fin mchiti ? Thanks man, for your tuts.

[@ayoub1024]

i just discovered you're moroccan "Yayli 80 Yayli 80D, Good luck bro !

[@iSam21]

Me too ! i was shocked 🤣😂

[@mehdilee6737]

nice one as always

[@MVRC95]

when you typed this.$store.state.xxx the xxx not appear , it works but no recommendations

[@michaelhoward9928]

Any luck?

[@MVRC95]

@@michaelhoward9928 he is using webstorm, in vs code didn't works.

[@alice_2302x]

Thanks! In index.ts I have the following error on "Vue.use(Vuex)": Property 'use' does not exist on type 'typeof import("C:/Users/AFXXX/Documents/techradar/node_modules/vue/dist/vue")' How did you solve this?

[@alice_2302x]

main.ts: app.use(store); ?

[@Skif769]

bro more video's about this thema pls

[@mohamedjamoun694]

ayli yayliii, mal7bib malo 3liya

[@ICSVortex-DCS]

Btw, i am currently work on website, based on react/redux and typescript. Would be great to see something related to react. Also, a small tip about react. There is a cool react framework, called Devextreme...)))

[@buddhanag4987]

Things changed in vue3

[@muhammadammar5426]

This one applicable for vue 3?

[@dasvas9383]

thanks!

[@Nurtylek]

I like your explanation hhaha, like wtf hahahah

[@OverSeasMedia]

Haha thanks mate :)

[@mberoakoko24]

11:12 wagwan 😀

[@daniilgri8737]

And what a fu.... mmmmmm ;D