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

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

Notify of
avatar

CodeBit
Guest
CodeBit
2 months 28 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
2 months 27 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
2 months 28 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
2 months 28 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
2 months 28 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
2 months 28 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
2 months 28 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
2 months 27 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
2 months 28 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
2 months 28 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
2 months 28 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
2 months 28 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
2 months 28 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
2 months 29 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
2 months 29 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
2 months 29 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
2 months 28 days ago

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

LearnCode.academy
Guest
LearnCode.academy
2 months 28 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!

Benn Ndeogo
Guest
Benn Ndeogo
2 months 28 days ago

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

LearnCode.academy
Guest
LearnCode.academy
2 months 28 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!

jitender yadav
Guest
jitender yadav
2 months 28 days ago

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

LearnCode.academy
Guest
LearnCode.academy
2 months 28 days ago

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

jitender yadav
Guest
jitender yadav
2 months 28 days ago

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

LearnCode.academy
Guest
LearnCode.academy
2 months 28 days ago

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

wpDiscuz