Vue 2 Internal Features from the Ground Up

Challenge 11: Mutations

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 11: Mutations" 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 use a Vue instance to fit the API requirements.


Transcript from the "Challenge 11: Mutations" Lesson

>> Evan You: Inside our next exercise, we'll see that it's still the same app except we now have a function called create store. So this function is essentially trying to emulate a simple version of UX. And what the way it should work is create store takes an object obviously. It takes some state, and takes some mutations, and inside mutations each mutation function receives the state as the argument.

And it operates on that piece of state. So this state will essentially be this object here, okay? And if you've used VX before, you'll notice this is exactly the same as this, right? So VX store essentially exposes this exact API. Except now we want to implement a simple version of it here, okay, with only mutations.

No concern for modules or actions or anything else. Just do this.
>> Evan You: And the way you use it is you can refer store.state.count. When you want to access state from the store and the way you trigger change in the store is by committing a mutation. So, commit. Then the ID of the mutation.

So the ID increment here which responds to the ID here that we're seeing inside our stored declaration.
>> Evan You: And the internal implementation is for yours to fill up. And obviously it should follow along from our previous exercise where we're using view instances as reactive stores. So yeah, so essentially what we're asking you to do is use a view instance to fit the API requirements that's outlined in the exercise.

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