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

Подписаться 773 тыс.

Просмотров 28 тыс.

50% 1

GET THE SOURCE CODE: github.com/lea...
Knowing how to scale Vue data is essential, and easily done with Vue.js stores.
Vue.js is one of the top 3 Javascript frameworks you should know these days.
The Vue framework is extremely simple to learn and fun to use.
It's my tool of choice for small widgets and simple apps, but can easily scale to large application development.
Vuejs is also the best framework for new JS developers to learn when starting out.
Vue.js 1: • Vue Tutorial - Vue JS ...
Vue.js 2: • Vue Tutorial # 2 - Vue...
Vue.js 3: • Vue Tutorial #3 - Vue....
Vue.js 4: • Vue Tutorial #4 - Brea...
Vue.js 5: • Vue Tutorial #5 - AJAX...
Vue.js 6: • Vue Tutorial #6 - Full...
Vue.js 7: • Vue.js Tutorial #7 - S...
Vue.js 8: • Vuejs Tutorial #8 - Vu...
Vue.js 9: • Vue Tutorial #9 - Scal...
~-~~-~~~-~~-~
Also watch: "Tailwind CSS - why CSS utility classes save so much time"
• Tailwind CSS - why CSS...
~-~~-~~~-~~-~

Опубликовано:

26 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 57

@adria2293 6 лет назад

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.

@Nono-shap 6 лет назад

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

@suyulmaz4 6 лет назад

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

@amerrashed6287 6 лет назад

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

@jimzkuy 3 года назад

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

@BenHayat 6 лет назад

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

@rickyu1978 5 лет назад

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

@rakeshkv1170 4 года назад

thanks for the tutorial

@Sara-rs4oq 4 года назад

Thank you for this amazing tutorial!!

@siba2893 6 лет назад

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?

@mrmagnetic927 6 лет назад

@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.

@yormen192 4 года назад

Nice work

@ajones1274 6 лет назад

I'd recommend using Vuex for a central store

@seanodotcom 6 лет назад

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.

@rayshinn1 6 лет назад

Hi any plans to teach us how to use VueX?

@vishwa 5 лет назад

Great tutorial.

@charleskumar4458 6 лет назад

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

@8Kexperience 4 года назад

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

@IstariThe5 6 лет назад

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

@yaya3242 6 лет назад

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

@mytasmic 5 лет назад

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?...

@manuelsbored 6 лет назад

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!

@dannybastosbr 6 лет назад

Great job! Awesome

@ojdgaf 6 лет назад

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

@peerhenry 6 лет назад

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?

@neilmockler6642 5 лет назад

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

@thySerge 6 лет назад

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 6 лет назад

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

@siba2893 6 лет назад

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?

@xareph7190 6 лет назад

Must-know Web Development Tech 2018? :D

@learncodeacademy 6 лет назад

Coming! I promise!

@alexcantemir3705 5 лет назад

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

@tonylam3284 6 лет назад

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

@somascope1834 6 лет назад

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).

@nayha70 5 лет назад

good man

@victornpb 6 лет назад

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

@learncodeacademy 6 лет назад

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 6 лет назад

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 6 лет назад

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 6 лет назад

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 6 лет назад

Nice! Best of luck!

@brawndo8726 5 лет назад

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

@WorstDeveloper 6 лет назад

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 6 лет назад

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 6 лет назад

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 6 лет назад

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 6 лет назад

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.