Published on November 21, 2017 by LearnCode.academy

GET THE SOURCE CODE: github.com/learncodeacademy/vue-tutorials

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: www.youtube.com/watch?v=mZY1yyrlJWU&index=1&list=PLoYCgNOIyGADZuvKJweutZDOO9VI9YiJ9
Vue.js 2: www.youtube.com/watch?v=h6lhOYv-QM4&index=2&list=PLoYCgNOIyGADZuvKJweutZDOO9VI9YiJ9
Vue.js 3: www.youtube.com/watch?v=t0w2KLOLaTA&index=3&list=PLoYCgNOIyGADZuvKJweutZDOO9VI9YiJ9
Vue.js 4: www.youtube.com/watch?v=1V9Lcnm1Dqw&index=4&list=PLoYCgNOIyGADZuvKJweutZDOO9VI9YiJ9
Vue.js 5: www.youtube.com/watch?v=inJDWcHmsss&list=PLoYCgNOIyGADZuvKJweutZDOO9VI9YiJ9&index=6
Vue.js 6: www.youtube.com/watch?v=Oyr5X5HwXhM&list=PLoYCgNOIyGADZuvKJweutZDOO9VI9YiJ9&index=5
Vue.js 7: www.youtube.com/watch?v=IkcJ0YAiycQ&list=PLoYCgNOIyGADZuvKJweutZDOO9VI9YiJ9&index=7
Vue.js 8: www.youtube.com/watch?v=mY2MiaYiSdw&list=PLoYCgNOIyGADZuvKJweutZDOO9VI9YiJ9&index=8
Vue.js 9: www.youtube.com/watch?v=mS9-fTrgjrA&list=PLoYCgNOIyGADZuvKJweutZDOO9VI9YiJ9&index=9

Leave a Reply

65 Comments on "Vue Tutorial #9 – Scaling Vue.js Data with Stores"

Notify of
avatar

Sergio Ribeiro
Guest
Sergio Ribeiro
6 months 5 days ago

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.

LearnCode.academy
Guest
LearnCode.academy
6 months 4 days ago

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

Sergio Ribeiro
Guest
Sergio Ribeiro
6 months 5 days ago

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.

LearnCode.academy
Guest
LearnCode.academy
6 months 4 days ago

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

Alexander Zotov
Guest
Alexander Zotov
6 months 5 days ago

Great tutorial!

Goksel Uyulmaz
Guest
Goksel Uyulmaz
6 months 5 days ago

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

Goksel Uyulmaz
Guest
Goksel Uyulmaz
6 months 5 days ago

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

victornpb
Guest
victornpb
6 months 5 days ago

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

LearnCode.academy
Guest
LearnCode.academy
6 months 4 days ago

Nice! Best of luck!

victornpb
Guest
victornpb
6 months 5 days ago
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… Read more »
LearnCode.academy
Guest
LearnCode.academy
6 months 5 days ago

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
Guest
victornpb
6 months 5 days ago

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

LearnCode.academy
Guest
LearnCode.academy
6 months 5 days ago

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
Guest
victornpb
6 months 5 days ago

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

LearnCode.academy
Guest
LearnCode.academy
6 months 4 days ago

Nice! Best of luck!

victornpb
Guest
victornpb
6 months 5 days ago
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… Read more »
LearnCode.academy
Guest
LearnCode.academy
6 months 5 days ago

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
Guest
victornpb
6 months 5 days ago

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

LearnCode.academy
Guest
LearnCode.academy
6 months 5 days ago

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.

CodeBit
Guest
CodeBit
6 months 6 days ago

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.

CodeBit
Guest
CodeBit
6 months 5 days ago

It's a forced architecture thanks to the libraries used though, not much I can do about it.For example in one component I need to initialize the MapBox map. And on that map I need to attach mouse events.These events need to trigger functionality from other components, such as which components to show/hide and what to show inside of them depending on where you hover your mouse.

James Lemire
Guest
James Lemire
6 months 5 days ago

CodeBit – Sounds like the actual problem is the architecture you chose to use in your application. I agree with all of the original posters rules to follow in Vue and React.

CodeBit
Guest
CodeBit
6 months 5 days ago

That is not possible though. I'm using Mapbox and a few other libraries that needs to be initialized inside of the components themselves. I can't create a codepen example since the application is too complex for that.What I'm looking for is basically just a global instance that I can add methods to as they get created in the components.

LearnCode.academy
Guest
LearnCode.academy
6 months 5 days ago
A codepen example of the problem might help.I'd always follow these rules, though, whether on Vue or React:- components are stupid views – They're only allowed to do 2 things: 1) trigger events to stores 2) read from stores to determine how to display the data as a view. The only logic and local variables they're allowed to have is what they need to render/display data, but can contain no logic on how to change it.- So all non-display logic lives at the store/method level.- keeping things organized now happens at the store level: how can I logically-separate my data… Read more »
CodeBit
Guest
CodeBit
6 months 5 days ago

The methods need to be defined in the child components though since they use local variables, and to keep things organized. And having like 1500 lines of code in a mixin gets messy.

CodeBit
Guest
CodeBit
6 months 6 days ago

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.

CodeBit
Guest
CodeBit
6 months 5 days ago

It's a forced architecture thanks to the libraries used though, not much I can do about it.For example in one component I need to initialize the MapBox map. And on that map I need to attach mouse events.These events need to trigger functionality from other components, such as which components to show/hide and what to show inside of them depending on where you hover your mouse.

James Lemire
Guest
James Lemire
6 months 5 days ago

CodeBit – Sounds like the actual problem is the architecture you chose to use in your application. I agree with all of the original posters rules to follow in Vue and React.

CodeBit
Guest
CodeBit
6 months 5 days ago

That is not possible though. I'm using Mapbox and a few other libraries that needs to be initialized inside of the components themselves. I can't create a codepen example since the application is too complex for that.What I'm looking for is basically just a global instance that I can add methods to as they get created in the components.

LearnCode.academy
Guest
LearnCode.academy
6 months 5 days ago
A codepen example of the problem might help.I'd always follow these rules, though, whether on Vue or React:- components are stupid views – They're only allowed to do 2 things: 1) trigger events to stores 2) read from stores to determine how to display the data as a view. The only logic and local variables they're allowed to have is what they need to render/display data, but can contain no logic on how to change it.- So all non-display logic lives at the store/method level.- keeping things organized now happens at the store level: how can I logically-separate my data… Read more »
CodeBit
Guest
CodeBit
6 months 5 days ago

The methods need to be defined in the child components though since they use local variables, and to keep things organized. And having like 1500 lines of code in a mixin gets messy.

Rony Vidaur
Guest
Rony Vidaur
6 months 6 days ago

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

CodeBit
Guest
CodeBit
6 months 6 days ago

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.

LearnCode.academy
Guest
LearnCode.academy
6 months 6 days ago

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

CodeBit
Guest
CodeBit
6 months 6 days ago

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.

Benn Ndeogo
Guest
Benn Ndeogo
6 months 6 days ago

Hey great to have you back. Anticipating your "What to learn in web development, 2018" video.

LearnCode.academy
Guest
LearnCode.academy
6 months 6 days ago

Thanks! I had vocal node surgery which put me out for a while. I'm actually working on that video now. I usually try to wait until things are somewhat different than the last video (I'd hate to do a video that's more-or-less the same as the year before). There's some great new stuff to talk about in 2018!

wpDiscuz