• 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

Store and Manage Data

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

Keeping Data Up to Date

One of the hardest things about creating any software application is ensuring that the data is always up to date and as easy to maintain as possible. In traditional web pages, when we write content using plain HTML, this is considered hard-coded or static data. This content is not expected to change based on other variables on the page. And while this is perfectly suitable for data that only appears once on the site, it has its limitations since it becomes very difficult to manage over time as the data gets spread across an application.

<html>
<body>
<h1>VueMart</h1>
<h2>Shopping Cart</h2>
<ul>
<li>Apples: $6</li>
<li>Bananas: $2</li>
<li>Coconut: $8</li>
/ul>
<p>Total: $16</li>
</body>
</html>

In the example above, you can see that this page contains a list of the user's order. However, what happens if you change the cost of bananas from $2 to $10? The Total amount would need to be updated by the correct amount as well. In other words, the total will remain at $16.00 unless you manually go in and perform calculations to update it properly.

What Is Reactive Data?

If you have used spreadsheets before, you are most likely familiar with creating equations in your data cells. For example, the total amount is generated by adding the amounts for apples, bananas, and coconuts together. If one changes, then it automatically reflects in total without any additional effort on your part.

A table showing a value of 2 for Apples, 6 for Bananas, and 8 for Coconuts, with a total of 16. The value for Apples is changed from 2 to 6, and the total automatically changes from 16 to 20.
Automatic updating of data in a spreadsheet

As you can see, when the number of apples is updated to six, the total automatically increases to 20. This is the essence of reactive data since it reacts to any changes and updates the appropriate values accordingly.

Reactive Data in Vue

Equipped with your knowledge of the data store from the last lesson, let's setup a data store for this Vue mart!

const app = new Vue({
el: '#app',
data: {
costOfApples: 6,
costOfBananas: 2,
costOfCoconuts: 8
}
})

In your HTML, you can now rewrite the static content to look like this instead:

<div id="app">
<h1>VueMart</h1>
<h2>Shopping Cart</h2>
<ul>
<li>Apples: ${{ costOfApples }}</li>
<li>Bananas: ${{ costOfBananas }}</li>
<li>Coconut: ${{ costOfCoconuts }}</li>
</ul>
<p>Total: ${{ costOfApples + costOfBananas + costOfCoconuts }}</li>
<h2>Store Hours</h2>
<p>Sunday: 10:00 - 16:00</p>
<p>Monday to Friday: 09:00 - 17:00</p>
<p>Saturday: 09:30 - 18:00</p>
</div>

As you can see, the total amount is a calculation based on the three variables:  costOfApples,  costOfBananas, and  costOfCoconuts. If any of those values change, the total will change accordingly. In other words, the reactive data store has made it so you don't have to do any additional work!

While this currently works, this solution would not scale well, since as the shopping cart grows, it would. It would create a lot of work but would be much cleaner if we could write  {{ totalAmount }}  instead. After all, while the shopping cart is only three items at the moment, you can imagine how this would quickly get out of hand as the shopping cart grows. Luckily, Vue has a property to help out with this: computed properties.

Computed Properties

Computed properties are a way to define a reusable value that is updated based on other data properties. Similar to the  data  property, start by adding a  computed  property that uses an object to define what properties you want.

const app = new Vue({
el: '#app',
data: {
costOfApples: 6,
costOfBananas: 2,
costOfCoconuts: 8
},
computed: {}
})

Unlike the  data  property, however, each  computed  property must be a function that returns a value. After all, it is performing calculations and returning the desired result. 

As mentioned earlier, our goal is to simplify the HTML by using  {{ totalAmount }}  instead of  {{ costOfApples + costOfBananas + costOfCoconuts }}. This can be done as follows:

const app = new Vue({
el: '#app',
data: {
costOfApples: 6,
costOfBananas: 2,
costOfCoconuts: 8
},
computed: {
totalAmount() {
return this.costOfApples + this.costOfBananas + this.costOfCoconuts
}
}
})

With this refactor, your code is complete!

<html>
<body>
<div id="app">
<h1>VueMart</h1>
<h2>Shopping Cart</h2>
<ul>
<li>Apples: ${{ costOfApples }}</li>
<li>Bananas: ${{ costOfBananas }}</li>
<li>Coconut: ${{ costOfCoconuts }}</li>
</ul>
<p>Total: ${{ totalAmount }}</li>
<h2>Store Hours</h2>
<p>Sunday: 10:00 - 16:00</p>
<p>Monday to Friday: 09:00 - 17:00</p>
<p>Saturday: 09:30 - 18:00</p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
costOfApples: 6,
costOfBananas: 2,
costOfCoconuts: 8
},
computed: {
totalAmount() {
return this.costOfApples + this.costOfBananas + this.costOfCoconuts
}
}
})
</script>
</body>
</html>

All of the app's data is now dynamic and ready to react to any changes that might happen to the user's shopping cart. Great job!

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

Instructions

  1. Replace restaurant name with "Cafe with a Vue." This should update everywhere on the site.

  2. Move data about restaurant into data store (i.e., phone number, email, and address).

  3. Create a  computed  property for the copyright text in the footer.

Let's Recap!

In this chapter, you've learned about:

  • Reactive data and its importance in creating maintainable data across an application.

  • How to use  data  to manage data within your Vue.js app.

  • How to use  computed  properties to simplify your code and data management.

With this newfound knowledge, you are now ready to learn about a powerful functionality in Vue that will empower your HTML with new abilities: directives.

Example of certificate of achievement
Example of certificate of achievement