DEV Community

Germán González
Germán González

Posted on

Explain Stores (Vuex) Like I'm Five

Hi everyone!

Could anyone explain me stores (Vuex or anyone) like I'm five? I don't understand.

Thanks!

Top comments (4)

Collapse
 
isaacdlyman profile image
Isaac Lyman • Edited

A Vue application is a tree of components. Each component has 0 or 1 parents and 0 or more children.

org chart

In Vue, you usually send information from one component to another in a straight line, up or down.

passing data

You use props to pass data down the component tree, and events to pass it back up.

This isn't so great if you've got a really big tree. Passing hundreds of notes back and forth gets to be a real pain.

piles of mail

Another option is to put all your data in JavaScript singletons, like a bunch of cardboard boxes that your application can pass around to whoever needs it.

cardboard boxes

This isn't a bad solution, necessarily, but what if it could be better?

Vuex is like a train where each car has the same shape.

train

The first train car, the locomotive, has all the data your components need to share. Whenever you want to change that data, you commit an action or a mutation. This is like adding another car to the train. It has the same shape as the locomotive, just different data inside.

Why is this better than cardboard boxes? Because if something goes wrong while you're watching, you can pause the train or put it in reverse. You can inspect two cars and see what's different between them. You can debug the entire train instead of just one car.

Vuex also works really well with the Vue Devtools, an official browser extension, so you can easily watch what actions/mutations are happening and how the data is changing.

So Vuex makes it super easy to organize data, share it between components, and observe when it changes. How do you use it?

A Vuex store is a blueprint for one of those train cars. It looks like this:

const dataStore = {
  state: {
    dataToShare: 0
  },
  mutations: {
    'CHANGE_DATA': function(newData) {
      this.dataToShare = newData;
    }
  }
}

export default dataStore;
Enter fullscreen mode Exit fullscreen mode

And you can register it like this:

import Vuex from 'vuex';
import dataStore from './dataStore';

new Vuex.store({
  modules: {
    dataStore: dataStore
  }
});
Enter fullscreen mode Exit fullscreen mode

Then in a Vue component, in any method or lifecycle hook, you can do this:

this.$store.commit('CHANGE_DATA', 1);
Enter fullscreen mode Exit fullscreen mode

Voila! Now dataToShare is equal to 1. If you're debugging and need to rewind it to 0, you can do so using the Vue Devtools.

To access dataToShare in any component, you can do this:

const componentData = this.$store.state.dataStore.dataToShare
Enter fullscreen mode Exit fullscreen mode

Usually you would do this in a computed method, so that every time dataToShare changes, your component gets updated. This is another advantage of Vuex: it hooks into Vue's reactivity system, so when data updates, your application updates too.

That's pretty much it! Any questions?

Collapse
 
gerchog profile image
Germán González

What a great answer!!! Thank you very much!.

Sorry for my english, I try to write the best I can.

I have a question. Maybe you just answered and I don't realized.

What's the difference between a store and a global service that I can access and get data? (Is the cardboard example?)

Thanks!

Collapse
 
isaacdlyman profile image
Isaac Lyman

Your English is excellent.

Assuming the Vuex store and the global service are both local (no HTTP requests or anything), the differences are:

  • Vue knows about the Vuex store, so it can do change tracking on it. If something changes in the Vuex store, the Vue app can update computed properties and watchers and re-render the DOM where necessary. If something changes in a global service, Vue won't know about it.
  • A global service is mutable, so it's harder to track changes to it as the application runs. A Vuex store is immutable--every time you change the state, a new object is created to hold the data. This means you can find out what changed between one state and the next by comparing the objects.
  • Vuex stores have some extra functionality, like NPM packages and plugins that can help you organize your state or even persist it to LocalStorage automatically.
Thread Thread
 
gerchog profile image
Germán González

Excellent answer. Very clear for me!

Thank you very very much!