STATE & STORE | VueJS & Vuex | Learning the Basics

Поділитися
Вставка
  • Опубліковано 17 гру 2024

КОМЕНТАРІ • 152

  • @saltycanucksasquatch8258
    @saltycanucksasquatch8258 4 роки тому +2

    'The' best tutorials on Vue.js and Vuex for beginners. Every detail CLEARLY explained at a comfortable pace!

  • @CorryTerblanche
    @CorryTerblanche 9 місяців тому

    Been a software developer learning from this channel since 2018 and still loving these videos

  • @khakimovnodir
    @khakimovnodir 6 місяців тому

    What a wonderful explanation from 7 years ago!

  • @batrasagar1
    @batrasagar1 5 років тому

    The way you demonstrate tough task in such a easy way,, its amazing !! You are super hero

    • @academind
      @academind  5 років тому

      Thank you so much Sagar!

  • @possiblepack847
    @possiblepack847 Рік тому

    Thank you so much. This video save my life from my senior project.

  • @nikoing
    @nikoing Рік тому

    Since i started following your videos, I'm always satisfied. This's a best one too.

  • @juankraut1621
    @juankraut1621 8 років тому +5

    Great explanation Max, after this one I had to watch all the series!! Really nice. Thanks a lot!

    • @academind
      @academind  8 років тому

      Great to hear you enjoyed it! :)

  • @sportly-vlog
    @sportly-vlog 7 років тому

    learning something new without even looking at a manual. pretty cool. thanks.

    • @academind
      @academind  7 років тому

      Amazing to hear that, thanks so much Jinseok!

  • @worddoc4322
    @worddoc4322 8 років тому +23

    I think starting from the beginning(no markup, no js) would be better. It's a little bit confusing once you start changing existing code.

    • @academind
      @academind  8 років тому +8

      But how would you start a Vue.JS (

    • @worddoc4322
      @worddoc4322 8 років тому +2

      Mindspace you didn't get my point) I don't except to be taught html or js from 0. I mean if you start project then start it with scratch.

    • @academind
      @academind  8 років тому +11

      This video is part of Vuejs series (playlist). Start with the first video, there we'll start from scratch.

    • @worddoc4322
      @worddoc4322 8 років тому +1

      Mindspace thanks)

    • @TristinColby
      @TristinColby 7 років тому +2

      Academind

  • @geeksy2278
    @geeksy2278 8 років тому

    Man this is incredible... I watched you because I wanted to learn more about node and express. I really enjoy your videos. Today I got 3 months on pluralsight from microsoft for free and I saw you just released a course there! Awesome! Keep on rocking!

    • @academind
      @academind  8 років тому

      Indeed, I did. Actually I got three courses there (not on NodeJS though). Very happy to hear you're enjoying my content! :)

  • @HarrysKavan
    @HarrysKavan 7 років тому +1

    The quality of these videos is awesome. Convinced me to buy the Udemy version!

    • @academind
      @academind  7 років тому

      So happy to read that and welcome on board of the Udemy course Harrys!

  • @DLLDFashion
    @DLLDFashion 7 років тому +1

    Comprehensive introductory video @Academind! As a somewhat more experienced React / redux guy I would've liked an initial introduction into state immutability, its advantages and how to achieve it by means of e.g. Immutable.js or seamless-immutable. Most often, libraries initially seeming more cumbersome than favourable are neglected by beginners, who'd profit the most from a firm introduction when just getting started with the eco system.
    Trotzdem top Quali und super Video :)

    • @academind
      @academind  7 років тому

      Thanks a lot for your feedback and suggestion, much appreciated! I'm happy to hear you enjoyed it :)

  • @tutosoffice
    @tutosoffice 3 роки тому

    nice, I got my data in vuex global state! just what I wanted to learn, thanks

  • @cyrusbesabella5938
    @cyrusbesabella5938 7 років тому

    Hi Max, how can I have a dynamic state, state from an api call using axios? should I use actions and there pass the result of an api call to the state? thanks

  • @NabinChaulagain-ou8uf
    @NabinChaulagain-ou8uf 7 років тому

    thank you. today i brought your course in udemy . i am looking forward to learn more from you.

    • @academind
      @academind  7 років тому

      Thank you very much for your support Nabin. I really hope you will enjoy the course :)

  • @piotrrobak8396
    @piotrrobak8396 7 років тому

    I have done similar app, to met with vue, but in my component (router-link) i cant access data from store. This is the pice of error " Property or method "users" is not defined on the instance but referenced during render. " Could you gess what i forgout about ?

  • @РоманМеч-й1ю
    @РоманМеч-й1ю 7 років тому +5

    im not strong in eng, but i clearly can understand your spech
    thank you for those video series about Vue JS

    • @academind
      @academind  7 років тому

      Thank you so much, awesome to read that you liked the series :)

    • @osmanaktas77
      @osmanaktas77 6 років тому

      me too

  • @doit4941
    @doit4941 8 років тому +13

    please make tutorial vue server side rendering.... i can't understand how it works

    • @MultiLenoxxx
      @MultiLenoxxx 7 років тому +4

      look into NUXT

    • @doit4941
      @doit4941 7 років тому +1

      thanks ;) interesting

    • @starflow90210
      @starflow90210 7 років тому

      You don't understand the concept? Just use a framework.…

    • @ramoverboard6093
      @ramoverboard6093 7 років тому +1

      use laravel with vuejs for server side. problem solved

    • @MirovoW
      @MirovoW 7 років тому

      with express.js

  • @maxpapirovnyk6351
    @maxpapirovnyk6351 6 років тому

    Special thanks for the good diction, understandable and legible English)

    • @academind
      @academind  6 років тому

      Thank you, happy to read that you liked the video!

  • @SaladoElFede
    @SaladoElFede 8 років тому +1

    Can't wait for the next one! I really like vuex, although I think it adds unnecessary complexity, it should be more easier to handle. Vue should implement a native way to handle states imho.

    • @academind
      @academind  8 років тому +4

      Vuex kind of is a native way. Don't forget that it may seem very complicated as it isn't used on a big app here. You only have that initial effort of setting everything up, then it really scales well and helps in bigger projects.

  • @fraann
    @fraann 8 років тому

    The best teacher. I buy your vue and vuex course on udemy and was amazing. Lets continue learning

    • @academind
      @academind  8 років тому

      So awesome to hear this, thanks so much for your feedback! :)

  • @MominulHaqueSejan
    @MominulHaqueSejan 6 років тому

    my favorite channel

    • @academind
      @academind  6 років тому

      So awesome to hear that, thank you so much Mominul!

  • @tomvoorneveld
    @tomvoorneveld 8 років тому

    Great. Clear and excellent setup. Example of a good video.. and yeb... when is part 2 ? )))

    • @academind
      @academind  8 років тому

      Should be out by now ;) Thanks a lot for your great feedback!

  • @adam192021
    @adam192021 5 років тому +4

    The BEST as always!

  • @nickltn4350
    @nickltn4350 7 років тому

    Thanks for these tutorials!
    In method "registerUser(user){...}" written "user.registered = true"; how it work reactive with store???? Thanks!

  • @austinyan1616
    @austinyan1616 Рік тому

    With a british accent, you're practically that guy in the IT Crowd Show

  • @tolstoy_was_right
    @tolstoy_was_right 4 роки тому

    as usual, very detailed and well explained. Especially good to know what kind of problem does is solve - without and with Vuex (before/after) the comparison on contrast. Thank you!

  • @wuzq6823
    @wuzq6823 7 років тому

    nice tutorial. it clarify basic concept in vue2, thanks

    • @academind
      @academind  7 років тому

      Great to hear that Wu, thanks so much!

  • @welleslo9544
    @welleslo9544 7 років тому +8

    The two component names, "Registration" and "Registrations", are too easy to confuse people who are learning new concepts. Maybe it would be better to name the components with a more distinctive name.

    • @academind
      @academind  7 років тому +1

      Thanks for your feedback, I'll try to be clearer the next time!

  • @sathishthoughts4002
    @sathishthoughts4002 5 років тому

    Thanks for vuex explanation😃

    • @academind
      @academind  5 років тому

      Thank YOU for your comment Sathish!

  • @mystupidgameplays-msg4303
    @mystupidgameplays-msg4303 6 років тому

    Hello! I have a noob question. Can i only get Vuex by doing NPM install? There is no script for it, yes?

  • @ovidiu_nl
    @ovidiu_nl 6 років тому

    Doesn't accessing the store like that (even read access, not necessarily mutation) reduce the portability of your components?

    • @academind
      @academind  6 років тому

      It depends. You can also build apps where you only got a handful of components (=> containers) which are connected to the store and which then distribute the data fetched from the store via props to child components.

  • @brendankeane474
    @brendankeane474 7 років тому

    Brilliant work. All of it. Thank you.

    • @academind
      @academind  7 років тому

      Thanks so much Brendan, awesome to read that :)

  • @syedalihassanshahbukhari3262
    @syedalihassanshahbukhari3262 7 років тому

    "export 'default' (imported as 'store') was not found in './store
    warning while compiling

  • @DeepTitanic
    @DeepTitanic 7 років тому

    Hi! Loving your tutorials and Vue.js. By "State" does that mean the status of the document such as meta-data about the application or can this also be used to store global data such a customer's quote during a multi step quote process?
    I just want make sure that I'm using this for the right reasons. Thanks!

    • @academind
      @academind  7 років тому

      Happy to hear you're liking the videos! :)
      State simply means your application state - that can be anything from some meta-data you need in your app to the state in a multi-step form. So definitely yes, you can use it for that

    • @DeepTitanic
      @DeepTitanic 7 років тому

      Brilliant thanks! Now that I've been looking at it for a week or so and I have a better understanding of it I can see how much simpler it is than both Redux and NGRX/store. Vue is just so much more approachable for a new comer. It's just a shame that there's not many Vue.JS jobs so I'm biting the bullet and learning Angular 2/Ngrx/store
      Loving your videos thanks for the hard work :-)

  • @cedricmanouan2333
    @cedricmanouan2333 3 роки тому

    Hello from the future
    This video is still helpful 😁

  • @wowwowwoah
    @wowwowwoah 8 років тому

    There is no source code on GitHub Repository linked in video description (

    • @academind
      @academind  8 років тому

      Sorry, my bad - it should now be online!

    • @wowwowwoah
      @wowwowwoah 8 років тому

      thx a lot)
      Are you answer on feedback on udemy.com ?

    • @academind
      @academind  8 років тому

      I do reply to threads in the Q&A section and to messages, yes. I can only reply to course-related questions though.

  • @russware5199
    @russware5199 8 років тому

    Thank you, thank you, thank you! I've been putting off learning vuex as it seems a bit of a minefield. These videos are AWESOME. You are a really good teacher. Great explanations made it all finally click into place. I'm excited to getting going now. One question (I know YT isn't the place for this), if I am pinging an api with an async call to fill up my state, should this call be in the component that needs the data? Or is there a better place for the call? I understand actions are what I need, but do I call the action in the ready/mounted function?

    • @academind
      @academind  8 років тому

      Thanks for your awesome feedback Toby! I'll actually get to async tasks later in this playlist - you could use "actions" for this. Again, I have a separate video on that.

    • @averyraylan1078
      @averyraylan1078 3 роки тому

      i dont mean to be so off topic but does someone know a tool to get back into an Instagram account??
      I stupidly lost the login password. I would appreciate any tricks you can offer me

    • @chanceparker853
      @chanceparker853 3 роки тому

      @Avery Raylan instablaster ;)

    • @averyraylan1078
      @averyraylan1078 3 роки тому

      @Chance Parker thanks for your reply. I got to the site on google and I'm trying it out atm.
      I see it takes quite some time so I will get back to you later when my account password hopefully is recovered.

    • @averyraylan1078
      @averyraylan1078 3 роки тому

      @Chance Parker It did the trick and I actually got access to my account again. I'm so happy!
      Thank you so much, you saved my ass !

  • @mkgamesartvisuals
    @mkgamesartvisuals 7 років тому

    Thanks for these tutorials. Really helpful!

    • @academind
      @academind  7 років тому

      Great to hear that, thanks for the nice feedback!

  • @seccat
    @seccat 8 років тому

    Great video. but the git repo is empty. Would like to follow along.

    • @academind
      @academind  8 років тому

      Sorry, my bad - it should now be online!

    • @seccat
      @seccat 8 років тому

      Mindspace , thx for the code.

  • @cleopatria1346
    @cleopatria1346 8 років тому

    Do Node JS and Vue JS have same level ? (I mean the functionality)
    If it so, what will you recommend for me ? Because I don't want to learn both of them if they have same level (or Do I have to learn both ?)

    • @academind
      @academind  8 років тому +3

      NodeJS and VueJS do two totally different things, that's extremely important to understand!
      NodeJS = server-side
      VueJS = client-side (browser)
      The both use JS, that's something they have in common. And both are great languages/ frameworks for their respective tasks

  • @LebaneseNostalgia
    @LebaneseNostalgia 7 років тому

    Can you please make complete lessons for nuxt ? I have tried it and it's so good.. it is hard not to fall in love with.. please consider having Nuxt lessons as there isn't any out there at all!!! And I would love to learn from you Max.. you are just great in explaining stuff :D I'm gonna make sure to watch all your Vue and related videos (hopefully Nuxt) here on youtbe and on udemy :D

    • @academind
      @academind  7 років тому +1

      Nuxt is definitely coming to this channel, no worries

    • @LebaneseNostalgia
      @LebaneseNostalgia 7 років тому

      Thank you!!!!

  • @H4yFanSs
    @H4yFanSs 8 років тому +5

    Are these tutorials different than Udemy Course?

    • @academind
      @academind  8 років тому +7

      Yes, these videos were recorded separately. They should provide a great introduction to VueJS but of course they don't go even close as much into detail as the Udemy course does.

    • @academind
      @academind  8 років тому +7

      Thanks so much for your amazing feedback! I'm really very happy to hear/ read that! :)

  • @kevintamez
    @kevintamez 7 років тому

    VERY GOOD. THANKS! thanks a lot for take your time to do this.

    • @academind
      @academind  7 років тому

      Happy to hear you're enjoying the video Kevin!

  • @alisultani1182
    @alisultani1182 7 років тому

    Hi tnx for tutorial. Is there any way to commit a mutation from within main.js file?

    • @academind
      @academind  7 років тому

      Yes, you can directly access the store object there

    • @alisultani1182
      @alisultani1182 7 років тому

      Academind Could you plz give an example. I tried this.store.commit () but didn' work.

    • @academind
      @academind  7 років тому +1

      Not this.store but in the main.js file you should have a store constant which you used to add the store to the root vue instance. Use this one.

    • @alisultani1182
      @alisultani1182 7 років тому

      Tnx u saved my life 😉

  • @linshen4658
    @linshen4658 8 років тому

    I would like to know if the source code of these tutorials is available in github?

    • @academind
      @academind  8 років тому

      Yes it is, you can find a link in the video description, just make sure to pick the right branch there.

  • @themarathoncontinues8233
    @themarathoncontinues8233 4 роки тому

    Can you please help me out
    What I am trying to do is read links on my page,
    the links contain userId, I want to use the userId to get other related post from the same userId,
    The problem is to read the new route with watch so it can update the page
    I managed to get the Values with object.values() function.
    it displays the following log:
    New value: /index/3?uid=1,,[object Object],viewArticle,/index/3,[object Object],[object Object],[object Object],,/index/3?uid=1
    I am stuck with trying to change page dynamicly with wacth

    {‌{ blog.title }}
    {‌{ blog.body }}






    title: {‌{ item.title }}

    text: {‌{ item.body }}






    import axios from 'axios';

    export default {
    components: {
    UserItem
    },
    created() {
    console.log(this.id);
    axios.get('jsonplaceholder.typicode.com/posts/' + this.id
    ).then(response => {
    this.blog=response.data;
    console.log(response.data);
    });
    axios.get('jsonplaceholder.typicode.com/posts/', {
    params: { userId: this.uid} }
    ).then(res => {
    //const uidArt = JSON.stringify(res.data) ;

    const uidArt = res.data;
    this.related = res.data;

    //this.related = uidArt;
    //var artikel = uidArt[0];
    console.log('artikel 1 id: ' + uidArt[0].title)
    console.log('artikel 2 id: ' + uidArt[1].id)
    console.log('artikel 3 id: ' + uidArt[2].id)
    console.log('uid log: ' + JSON.stringify(uidArt) );
    });
    console.log('uid:' + this.$route.query.uid);
    },
    data() {
    return {
    id: this.$route.params.id,
    uid: this.$route.query.uid,
    blog: [],
    related: []
    }
    },
    watch: {
    $route(newVal, oldVal) {
    console.log(`New value: ${ Object.values(newVal)} `);
    console.log(`Old value: ${ Object.values(oldVal)} `);
    }

    }

    #single-blog{
    max-width: 960px;
    margin: 0 auto;
    }

  • @ich6885
    @ich6885 6 років тому

    Thanks for this amazing guide, you helped me a lot starting with Vuex.

    • @academind
      @academind  6 років тому

      Really great to read that the video was helpful for you, thank you so much for sharing this :)

  • @GameCrawl
    @GameCrawl 4 роки тому

    I bought your vuejs course in Udemy about a week ago. Now I just started going through it. I wonder if the Udemy vuejs course is updated or it is still using the old version of vuejs?

    • @academind
      @academind  4 роки тому

      The course is up-to-date and uses Vue 2. I'll update the course to Vue 3 once it is final though.

  • @balance4432
    @balance4432 6 років тому

    Great explanations!

    • @academind
      @academind  6 років тому

      Thanks again for your great feedback!

  • @KeijiAkuma
    @KeijiAkuma 4 роки тому

    Bro, how the f%&§% kriegst du das v-for OHNE key hin? Bei mir wirft der scheiß immer einen Error und bei meiner Webseite zeigt es dann nix an

  •  8 років тому

    amazing video mate! thanks a lot

    • @academind
      @academind  8 років тому

      Happy to hear you're liking it! :)

  • @CDRTM
    @CDRTM 7 років тому +1

    Why aren't you with Vue.js on Pluralsigh ? Since you´re instructor there?
    Cheers, your videos and courses rock!

    • @academind
      @academind  7 років тому +2

      They wouldn't let me create a course on it ;)

    • @CDRTM
      @CDRTM 7 років тому +2

      :(

    • @Ana-mn5io
      @Ana-mn5io 6 років тому

      I recommend you to subscribe to safari books, they have books, videos, and also they are up to date

  • @binoysarker903
    @binoysarker903 7 років тому

    I want to include bulma in this project. how can i do it?

  • @olatunjilawal1204
    @olatunjilawal1204 7 років тому

    Hello, I have a project on laravel 5.4 and I need to create replies to post, something like FB. Please how do I do something like this
    @foreach($posts->replies as $reply)

  • @ХочуПрограммировать-й8л

    ypeError: Cannot read property 'state' of undefined

  • @Amivit
    @Amivit 7 років тому

    Hi! Randomly stumbled over this video, even though I've only just reached the monster slayer project in your udemy course (5/5 so far!!!). Just a random question; which IDE are you using in this video, and the ones on your Udemy course? Looks very pleasant. Thank you!

    • @academind
      @academind  7 років тому +1

      Great to hear you're enjoying the Udemy course! :)
      I use Webstorm by Jetbrains. In its latest version (EAP 2017.1) it even supports Vue.js out of the box!

  • @doit4941
    @doit4941 8 років тому

    where is github project? it is empty

    • @academind
      @academind  8 років тому +1

      Sorry, my bad - it should now be online!

  • @DjLeonSKennedy
    @DjLeonSKennedy 7 років тому

    As i understood Vue cannot work with immutable data

    • @academind
      @academind  7 років тому

      It can, you can use Vuex in an immutable way (simply change your state by setting a new one in your mutations). It's just not a required paradigm

  • @jindal0001
    @jindal0001 5 років тому

    Great Video. Thanks

  • @peekpt
    @peekpt 7 років тому

    Vuex is a way of entering your house before closing the door

  • @timzeynalov3537
    @timzeynalov3537 3 роки тому

    2016 year . your code does not work yet

  • @gigabek
    @gigabek 6 років тому

    As I understood Vuex is some sort of Redux for Vue.js, isn't it?

    • @academind
      @academind  6 років тому

      Yep, this is correct

    • @ojsojs6004
      @ojsojs6004 5 років тому

      @@academind should i always use vuex?

  • @hotbelgo
    @hotbelgo 8 років тому

    I don't think it was a good idea to start with showing how to manipulate the store directly (when I presume we will get to reducers soon).

    • @academind
      @academind  8 років тому

      I see your point, but I find it very important to develop the idea behind Vuex step-by-step and not jump into the finished product right away. Especially as I emphasize that you don't really do it this way.

    • @hotbelgo
      @hotbelgo 8 років тому

      Ok, I've now watched the rest of the videos (possibly the best course I've ever seen in youTube), and see that the original code was very close to what you needed in the mutations. I had assumed Vuex would be more Elm Architecture / Redux-like, i.e. with pure functions. Apologies

  • @cehson
    @cehson 7 років тому

    Does anyone know how come our app root component knows what & are child components?
    prntscr.com/f4d8rn
    I dont get how that HTML TAG is linked to that components. Any help will make things more clear to me, and ofcors help me. Thank you Max for making this tutorials, gonna enroll to your Udemy course also (after i go through this ones).

  • @serhendiefendi
    @serhendiefendi 8 років тому

    Thanks, This great.

    • @academind
      @academind  8 років тому

      Thanks for your amazing feedback Mustafa!

  • @sharmilar8733
    @sharmilar8733 7 років тому

    apply the code visual studio pls take iteas

  • @timomuller7609
    @timomuller7609 8 років тому

    okay. sounds a bit hard. but i'll get into it.

  • @mikeprotasov2164
    @mikeprotasov2164 6 років тому +1

    Лайк из России с Любой )

  • @ricricucit
    @ricricucit 7 років тому

    tabs vs spaces

  • @spoccobeech
    @spoccobeech 6 років тому

    more likely controllers of laravel

  • @MrSvobi1975
    @MrSvobi1975 7 років тому

    Thx!

    • @academind
      @academind  7 років тому

      Thank YOU! Happy to see you're liking it!

  • @sharmilar8733
    @sharmilar8733 7 років тому

    pls replay me