Vue 2 Internal Features from the Ground Up

Challenge 9: Shared Object

Evan You

Evan You

Creator of Vue.js
Vue 2 Internal Features from the Ground Up

Check out a free preview of the full Vue 2 Internal Features from the Ground Up course

The "Challenge 9: Shared Object" Lesson is part of the full, Vue 2 Internal Features from the Ground Up course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students create a counter component where all its instances share the same count state.


Transcript from the "Challenge 9: Shared Object" Lesson

>> Evan: The next exercise, what we're gonna try to do is the template is almost the same, except that these components do not take props anymore. But we need to maintain the same behavior from our previous exercise. When you click the button, and it caused the increment method of the root component, and all these child components should update together.

So we need to find a way to make first make all of these child components share the same piece of state. Second, our root component should be able to update that piece of state. And how can we do that? So the hint is that we can use a shared object to serve us as our common piece of state.

>> Evan: And many of you probably have run into this warning before, like, if you write a component like this, what warning would you get? Anyone?
>> Evan: Yeah, data must be a function, right? So most of you have probably run into that before. The reason that data must be a function is because most of the time we want each component instance to have its own separate unique piece of data, instead of all of these components sharing the same piece of data.

But in this particular case, what we want to achieve is to make all of them share the same piece of data. So how can we achieve that? So let's try to do that.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now