• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/13/21

Retrieve Data From Vuex

Log in or subscribe for free to enjoy all this course has to offer!

Storing Data in Vuex

Now that we have installed Vuex on our application, it's time to begin the journey to understanding how Vuex works. And since Vuex will serve as our global data store, the first thing you should learn is how to store and retrieve data from it. Let's get started!

In Vuex, our data store is defined as  state  in the  store/index.js  config object. Even though it sounds like new terminology to learn, think of it as the  data  property that we have been using this whole time. 

A comparison showing how the state in a Vuex store maps conceptually to the data store in a standard Vue config object.
A comparison showing how the state in a Vuex store maps conceptually to the data store in a standard Vue config object.

When it comes to storing data in Vuex, it's as simple as adding key-value pairs like you would in any other normal JavaScript object.

export default new Vuex.Store({
state: {
month: 08,
day: 12,
year: 2008
}
}

Should we just put everything in Vuex state instead of in component data?

While it may be tempting to put everything in the global state, this is generally considered bad practice since part of what makes component-based architecture powerful is the ability to scope your concerns. In other words, you only want to surface data to a global level when you find that there is a need to access data from multiple components.

Retrieving Data in Vuex

Now that you know how to define data in Vuex, the next step is to figure out how to access data in components. There are two ways of doing this:

Using $store

As you dive deeper into more advanced Vue techniques and grow your knowledge, you will come across properties that are prepended with a dollar sign. Examples include:

  • this.$options

  • this.$parent

  • this.$children

  • and so forth

These are specific properties that are scoped to the Vue instance you're working on, and are prepended with the dollar sign to ensure that these methods are only used as intended.

Since our Vuex store is injected at a global level across all components, we have access to a  $store  property, which will allow us to access the entire Vuex directly.

So continuing our example from above, we could access our state via $store by the following:

<template>
<p>The date stored in Vuex is {{ $store.state.year }}-{{ $store.state.month }}-{{ $store.state.day }}.</p>
</template>

However, this can clutter up the template quite a bit. Wouldn't it be nice if there was a simpler way of referencing the store similar to how Vue automatically detects that we want to use the  $data  property whenever we call a variable in the template? Well, lucky for us, there is:  mapState!

Using mapState

Rather than calling $store  every time, Vuex has provided a way to easily map our state to variables we can easily call in our components:  mapState. This method allows us to request whatever state properties we want from Vuex, and it will add it to our computed properties.

export default new Vuex.Store({
state: {
month: 08,
day: 12,
year: 2008
}
}
<template>
<p>The date stored in Vuex is {{ year }}-{{ month }}-{{ day }}.</p>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['year', 'month', 'day'])
}
}
</script>

In the event you need to give your Vuex state variables a different name in your component due to naming conflicts, you can easily do this by switching out the argument from an array to an object as such:

<template>
<p>The date stored in Vuex is {{ customYear }}-{{ uniqueMonth }}-{{ day }}.</p>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
customYear: 'year',
uniqueMonth: 'month',
day: 'day'
})
}
}
</script>

Within this object, the key represents the new name you want to use to reference, while the value corresponds with the state property you want Vuex to reference.

That said, you'll probably notice that we're assembling the date using a manual process. If this date were referenced in multiple places in the app, it would be difficult to maintain. If only there were a way to define computed properties in a Vuex store!

Introducing Getters

When  store.js  is initially scaffolded, it leaves off one of the properties that is very useful in many scenarios: getters. Even though this sounds like you have to learn new terminology, it is easiest to treat getters as the equivalent of the  computed  property in Vue. 

A comparison showing how getters in a Vuex store maps conceptually to the computed property in a standard Vue config object.
A comparison showing how getters in a Vuex store maps conceptually to the computed property in a standard Vue config object.

So in our date example, this is how you would define a formatted date:

export default new Vuex.Store({
state: {
month: 08,
day: 12,
year: 2008
},
getters: {
formattedDate: state => {
return `${state.year}-${state.month}-${state.day}`
}
}
}

As you can see in the example, each getter is a function that receives the state as an argument and returns a value to access later.

Next, we can simplify the code in our component even further with  mapGetters, which works just like mapState.

<template>
<p>The date stored in Vuex is {{ formattedDate }}.</p>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['formattedDate'])
}
}
</script>

And just like  mapState,  mapGetters  can also take an object that allows you to define custom names for the getters you are referencing.

Exercise

You will find the source code for the exercises in the course's GitHub repo in the  cafe-with-a-vue folder. To get started, check out the  P4C3-Begin  branch.

Instructions

  1. Migrate shoppingCart data to Vuex

  2. Migrate restaurantName data to Vuex

  3. Migrate  simpleMenu  data into Vuex

  4. Migrate  copyright  to  getters 

Let's Recap!

In this chapter, you learned how to:

  • Define the data store in Vuex with state.

  • Retrieve properties from Vuex in your components with  $store.

  • Define computed properties using getters in Vuex.

  • Retrieve state from Vuex with  mapState.

  • Retrieve getters from Vuex with  mapGetters.

In the next chapter, we'll look at how to update and modify our store in Vuex with mutations and actions.

Example of certificate of achievement
Example of certificate of achievement