[Vuejs]-Using Vuex in Vuejs application

If you’re working on a rather simple application or if all you do is to replace some parts of your (server rendered) application with some Vue.js magic, you might actually be fine not using Vuex at all.

On the other hand, if you’re working on a large scale single page app, you may encounter situations where you need the same data at two completely different places in your application. This is the point at which a centralized state management tool like Vuex oftentimes makes a lot of sense.

You can find more on : https://markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/

If you have been through the documentation of Vuex on the first page you would have seen a headline When Should I Use It?. That gives a perfect view of when to use Vue.

You can use Vuex in any type of applications, small, medium or large scale. That’s totally up to you. But it too overwhelming to use it in a small project because you have to write down a lot of code to get started with. Which can be easily maintained by the component state.

But it comes handy when the application is large. Managing state outside the Vue component will be a necessity and Vuex will be the natural next step for you.

Vuex is used to pass/store data between components so that it can be used or edited anywhere within your application.

You need to weigh up the benefits of using Vuex over the extra work that is required to set it up. It can be a very valuable tool when your application gets quite large but on the other hand when working with a small application the amount of time/effort/code to get it set up might out weigh the benefits of actually using it.

Using a centralised data store such as vuex is only really needed in a large scale app where you need to access data at different stages throughout the app.

Here is a quick link that further explains:

https://vuex.vuejs.org/

There is also centralised state management that is not vuex that can be useful when working with smaller scale apps which is detailed in this link

https://v2.vuejs.org/v2/guide/state-management.html

Vuex is a flux implementation specifically for vue, and is officially supported by vue.js.

Well let’s talk some plain English. In general, while developing a front end application using component driven frameworks like angular, react, vue, etc,. we need to start with developing components as they are basic as well as complex building block of the application. Usually a small/mid size project will have 5-10 components. And could go to any number in larger applications . These components would at many places need to communicate with each other so as to pass data.

The flow of data can go in one of the three directions:

1. Parent Component to Child component
2. Child Component to Parent component
3. Sibling Components

In order to achieve one, two or all the three of the above, there are ways to let the data flow. Some of the ways in vue.js are props(parent to child), events($emit, $on – child to parent), services(event driven) and vuex.

So let’s just talk about vuex for now, i.e., when should you go for vuex and not other above mentioned methods.

1. When number of components are high. It would be a big pain if each component will have to maintain their own data in application level. Vuex solves it with state(storing state) and getters(getting state).

2. When you want to share data between siblings components. Props and Events would be the last thing you would want to do. Vuex just makes it easy. One of the sibling component will mutate the global state and other can just get it using getters (try mapGetters in computed properties of the component)

3. When too many components are updating the data. That’s where vuex’s mutations comes handly. Mutations are always synchronous. In case you want to work with async tasks then use actions.

Well this list can on and on…

Personally I like to follow this:

When the number of components and communication between them is high. Use vuex to manage state more conveniently and to make life easier.

I hope it helps.