• 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

Manage Data Across the Entire App

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

What Is State?

When working with single-page applications (SPAs), a common topic that comes up is the concept of managing state. And while that topic can often become a very complex discussion, the primary goal that people are trying to achieve is to:

Ensure that the application uses the correct data at all times.

Based on this, you can define state as a snapshot of the data store at a single point in time. This is complex to manage because multiple pieces of state are used across an application. After all, every component utilized contains its own data property, which means it is managing its own state. Once you add passing data back and forth between components, it becomes quite complicated.

To illustrate this, how many instances of state are represented in the following example?

src/components/GroceryList.vue
<template>
<div>
<h1>{{ pageTitle }}</h1>
<ul>
<ListItem
v-for="item in list"
:key="item"
:item="item"
/>
</ul>
</div>
</template>
<script>
import ListItem from './components/ListItem.vue'
export default {
name: 'GroceryList',
components: {
ListItem
},
data() {
return {
list: ['apples', 'bananas', 'cherries'],
pageTitle: 'My Grocery List'
}
}
}
</script>

At first glance, it would seem like there are two instances of state: the parent component  <GroceryList>  and the child component  <ListItem>. However, we are actually dealing with a total of four instances of state:

  1. GroceryList

  2. ListItem item="apple"

  3. ListItem item="bananas"

  4. ListItem item="cherries"

To demonstrate this, imagine if the  <ListItem>  component was defined as follows:

<template>
<div>
<input type="checkbox" v-model="isPurchased" />
<label>{{ item }}</label>
</div>
</template>
<script>
export default {
name: 'ListItem',
props: {
item: String
},
data() {
return {
isPurchased: false
}
}
}
</script>

As you can imagine, every item on the  <GroceryList>  needs to be able to manage whether or not it has been purchased. If the child components shared a single state, then checking off a single item would automatically update the rest of the components. šŸ˜±

Single Source of Truth

A common term is the single source of truth (sometimes abbreviated SSoT). The core concept behind this is to prevent unnecessary duplication of data around the application.

Although it may seem harmless at first, storing multiple copies of the same data in an application can cause bugs in a system since it allows for different sets of the "same" data to exist at the same time. Instead of the application only having to update a single set of data, it would have to manage multiples, which is a problem because:

  • It is harder to manage from a coding perspective since the dependency is easily forgotten as the system grows more complex.

  • More bugs arise as a result of this fragmentation.

This is why the concept of a single source of truth is critical to the success of any state management system.

Limitations of Common Communication Techniques

So far in this course, some of the popular techniques we have covered for communicating between components include:

  • Props

  • Slots

  • Events

While these techniques are effective at helping to communicate directly between a parent and child component, they are limited in their ability to manage data across an application. And although there are ways to hack together a global state management system, these are generally not recommended because they do not scale well and are difficult to manage in the long term.

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  P4C1-Begin  branch.

Instructions

  1. Assess the current state of the application and where all the various data properties exist

  2. Create an outline or visual document representing the application state structure

Let's Recap!

In an ideal state management system, you need it to be able to:

  • Create a single data store that will serve as the single source of truth for all shared data.

  • Allow any component to request data from it directly.

  • Allow any component to make changes to the data store directly.

Luckily for you, there is a state management system in the Vue.js ecosystem that does this for you: Vuex.

Example of certificate of achievement
Example of certificate of achievement