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

The "Challenge 11: 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 11.

Preview
Close

Transcript from the "Challenge 11: Solution" Lesson

[00:00:00]
>> Evan You: Let's take a look at how to tackle this function. As we see, it returns the store. Obviously, we just return a new view instance from it. And first thing we need to do is, look at the apr requirement. We need to be able to access the state, in store view store.state.

[00:00:23]
So seems pretty obvious that we can just put the state here, that allows us to access store.state directly and it's reactive, which is great. And the other part of the API is ,this commit method, right? So obviously, we can make a commit method here. And the implementation is that, we look at what arguments does it take?

[00:00:56]
It takes the ID of the mutation, so it's like mutationType or something. And notice that, we are destructuring the mutations object from our declaration here, and mutations is just an object with different keys.
>> Evan You: And so, mutations[mutationType]. This will give us the corresponding function, which is this inc function here.

[00:01:37]
And notice that this inc function needs to be passed .state, so it needs to be passed here.
>> Evan You: And now, we've essentially complete the picture.
>> Evan You: So yeah, pretty straight forward, the real thing to note here is that, the step from going to a bare bone view instance, to how we can use that.

[00:02:12]
Wrap it up with some utility functions and eventually, expose a different API. So for this small exercise, our new create store effect doesn't really make things fundamentally more useful, than a simple view instance. This is really just to demonstrate how ViewX, in fact ViewX is implementing in a very similar fashion, but we can add more functionalities to it.

[00:02:48]
For example, ViewX has a concept of actions, getters, modules. And build it upon that, but at the root of it, at the core of ViewX is still, this reactivity system driven by view essences. So hopefully, you kinda get an idea, you can leverage the same pattern, tweak the API to a state that you like.

[00:03:17]
To create an alternative state of management solution to your liking, so that's totally possible. And I really recommend people to experiment and just fiddle with these, because it really helps you understand. How a famed engine library that looks really fancy and powerful are in fact composed of these little bits.

[00:03:39]
They're all built from these common primitives.

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