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

The "Challenge 9: Solution" 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:

Evan walks through the solution to Challenge 9.


Transcript from the "Challenge 9: Solution" Lesson

>> Evan You: The catch of this implementation is, obviously, you can have a shared object as our state.
>> Evan You: And, [COUGH] if we are smart, we can make it directly return the thing from within the render function. So like,
>> Evan You: We can do it like this, but you realize that this does not really work.

Let's implement the methods first.
>> Evan You: If we run this, you'll realize that when you click, state doesn't increment.
>> Evan You: And the reason to this is that,
>> Evan You: If you never really had the chance to make state reactive, the default, so in Vue,
>> Evan You: The way to let Vue know that it should make something reactive is by returning it within data.

>> Evan You: If you return something within data, this is the object that Vue will call to observe or confer function on. Right, if we don't do that, then state was never actually passed to Vue and Vue never had a chance to make it reactive then nothing will happen, right?

>> Evan You: What we can do is just return the same object inside the data function.
>> Evan You: And now, we can do,
>> Evan You: this.count.
>> Evan You: So, this should do the trick.
>> Evan You: Let's run it.
>> Evan You: No,
>> Evan You: I didn't register Counter, okay.
>> Evan You: So, components counter.
>> Evan You: Oops.
>> Evan You: So now it works as intended because Vue's got a chance to take state to burden to a reactive object.

And state.count is proxied on to the counter instance as this.count.

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