Vue Tutorial #9 - Scaling Vue.js Data with Stores

[@adria2293]

Certainly one of the best tutorials I've ever watched. Short, to the point, and very very clear. Thank you very much for taking your time to make them.

[@suyulmaz4]

Great introduction , summary ,essence and practical info. Would like to see more videos on Vue other details.

[@Nono-shap]

God damn, 2 months without any tutorial from you feels like a year... Still alive bud?

[@neilmockler6642]

how do I use put a varible from an object in the router to path?

[@KrakeNjp2y]

you made this so easy to understand. thanks a lot!

[@IstariThe5]

Which syntax theme for sublime did you use in your video "Javascript Events Tutorial - How Web Developers Respond to User Input".

[@amerrashed6287]

that is the same concept of Vuex, but is more simple!! thank u!

[@jimzkuy]

God bless you broo!! Finnaly i understand the vue fundamental

[@rayshinn1]

Hi any plans to teach us how to use VueX?

[@seanodotcom]

Thanks for the video, and love the idea. Question: How do you handle things like computed properties using this technique? In this example, 'bestFriends' might be a computed property that returns a filtered set of friends. It would make sense to have this on the store, but it seems that computed properties here are not available in any component.

[@Sara-rs4oq]

Thank you for this amazing tutorial!!

[@yaya3242]

Looks like you could use the mixin feature of vue instead.

[@siba2893]

By the way using this method, you cannot use the this of the component, that means you cannot use this.$refs or this.$route right?

[@tonylam3284]

what are the pros and cons of doing it this way vs using something like vuex?

[@somascope1834]

This store pattern is really nice for small-sized apps. It can all depend on what you grow/scale up to during your development. Vuex has a stronger pattern for handling things, including async data. The Vue dev tools in Chrome/Firefox give you great access to Vuex data, including time travel (back and forth between all your stages of mutating the state, aka editing the data). Vuex does have a bigger learning curve (but not overwhelmingly so).

[@peerhenry]

Why not make a store that resembles a vue options object with data: () => ({...}), methods: {...} and then simply export default that store in the script tag of the .vue file?

[@siba2893]

Hey this is amazing, you made it look so simple! I've been struggling with how Vuex makes all states merge into a giant state and you have to be carefull on how you name stuff. This is way more cleaner. Would you say its better to use this approach instead of VUEX?

[@BenHayat]

LearnCode.Acadamy should be on Udemy and/or PluralSight. Great instructor.

[@mrmagnetic927]

@LearnCode.academy The Scaling vue.js using stores is great when rendering the stores statically. Using the store pattern in a dynamic way pulling from API endpoint will change the way you access the data.

[@mytasmic]

Great tutorial, thank you! Can you please clarify what are pros and cons of such approach in comparison to Vuex? It looks very similar, but if it's that easy, what's the point of Vuex then?...

[@rickyu1978]

Vuex suddenly made a whole lotta sense, and for simple apps your pattern is far better.

[@alexcantemir3705]

HI Bro ... can you make a video talking about states in VueJS ? Thank you

[@ajones1274]

I'd recommend using Vuex for a central store

[@victornpb]

Let's say you have a Dropdown vue component, how do you call a add method from outside of vue?

[@learncodeacademy]

Any JS code could require that store and call a method on the store, which would trigger an update on all of the components listening to the data.

[@victornpb]

LearnCode.academy I mean how can a code subscribe to a change On a vue component, There's any way of adding a event listener to a vue component

[@learncodeacademy]

AH, sorry for the confusion! The 2 ways to do it would be watchers and custom events: watchers: codepen.io/anon/pen/NwMNeO?editors=1011

[@victornpb]

thanks for that reply, I've watched the whole vue series yesterday, and I already built a backbone wrapper view so I can make little pieces with vue inside this Backbone app. Now I have 2 problems to solve, my build step I can't use it like in the documentation, because there's already so much going on there. I think I'll have to makeup an extension like something.vue.html and create a rule so the vue template loader can create the render function without messing with my underscore templates. And locales I have to find a way of calling a function that spits strings in the template. I'm thinking I can use the filter or computed property to wrap it, I haven't tried it yet tho. {{_t('foo')}} doesn't work. btw this is my first real contact with vue, and your series just conviced me to give it a try. thx

[@learncodeacademy]

Nice! Best of luck!

[@8Kexperience]

If you can cover page.js would be greatly appreciated!

[@manuelsbored]

hi! I love your videos and I love how you explain everything and makes sense youre a really good teacher and I noticed sometimes you do reviews and some other videos other than tutorials but I tried looking for one to see if you talked about the coding bootcamps that are now popping everywhere. do you have a video that talks about that or would you please make one and let us know your opinion about it. im asking you because I feel like you know what youre talking about and I would really like to get your point of view on that. do you think bootcamps are worth it? is it better to learn on your own. PLEASE reply. your answer is important to me as im sure to many of your subscribers. thanks in advance!

[@thySerge]

Great stuff. Been learning Vue for a bit now, and still took away some new things from your tuts. Any chance to touch on authentication with JWT and Vue... haven't seen anything worth while on YT about it.

[@learncodeacademy]

Thanks! Here are a few examples for you on auth with Vue: auth0.com/docs/quickstart/spa/vuejs/01-login github.com/websanova/vue-auth

[@WorstDeveloper]

Let's say I have 5 components with their own methods. Now I still want the methods to be defined in each component, but I want to share some of them through a store or similar. Is there any way to dynamically add methods to the store so that all components can use them? Or just create a reference to the component's methods in the store. It would solve a lot of problems for me.

[@Mezklador]

Maybe - I'm not quite sure - you can define some "global" methods at the top-level application, and perhaps, 'allowed' some according to dataStore?

[@WorstDeveloper]

I don't quite understand. What I want to do is to define the methods inside of each component, then push them to a global store. I could put them in the window scope, but that would be ugly.

[@learncodeacademy]

A few good rules: - Any shared code relating to the store.data should live in the store.methods. - The store should never be aware of any components, only it's own data. - The components shouldn't be able to modify store methods, only execute them. If you have a one-off task/method that only one component needs to do, code it on the component.methods

[@WorstDeveloper]

I have about 20 different methods that I need to make available across components (it's a big project and these methods are located inside of child components). Right now I have a quite suboptimal way of doing it by attaching them on a Vuex store to make them globally accessible.

[@rnvdrs]

you can use a mixin for that, you define your functions there and then import the mixin on every component as needed

[@vishwa]

Great tutorial.

[@dannybastosbr]

Great job! Awesome

[@yormen192]

Nice work

[@charleskumar4458]

cool video and very helpful !!! Thanks for the upload

[@rakeshkv1170]

thanks for the tutorial

[@jitenderyadav3466]

In your videos I can not watch properly what are you writing on your text pad so zoom your text editor.

[@learncodeacademy]

Thanks for the feedback, I'll try to increase zoom level

[@ojdgaf]

i guess we can simplify out store because it is just a plain object: export default { friends: [], add(friend) { this.friends.push(friend); }, };

[@xareph7190]

Must-know Web Development Tech 2018? :D

[@learncodeacademy]

Coming! I promise!

[@DevSage]

I'm trying to grow my web dev channel. Anyone care to give me any feedback for my current vids. Not much right now but more content is coming

[@nayha70]

good man

[@brawndo8726]

JS newbies, importing a mutable object actually has nothing to do with Vue. You can use this anywhere.