Challenge 4: Solution

[00:00:00]
>> Evan You: So we've mentioned that your plugin should look something like this.
>> Evan You: So we're just gonna copy that internal code here.
>> Evan You: So this install function will be invoked when we call Vue.use(RulesPlugin). This essentially just calls this install function. And we apply the global mixin, which installs a created hook into our component.

[00:00:25]
And we check for rules, and if the rules exists, let's copy over the usage here to see how it actually looks like, right? So look at the shape of this rules object, and we notice that it's using keys that corresponding to the data property that we're trying to check and validate.

[00:00:51]
So obviously it should be able to contain more rules, if you want to. You need to iterate over them, so we use the familiar pattern again, Object.keys,
>> Evan You: (this.$options.rules), but .forEach rule. So for each rule, we have a validate function and a message, right? So we can just destruct it here, in fact, validate, message.

[00:01:27]
So our line's getting pretty long, but that should be fine.
>> Evan You: Missing a bracket here, okay.
>> Evan You: So we have validate a message, and obviously we want to, we also have key, right? In fact what we get here is the key, I'm sorry, [LAUGH] what we get is the key, and the rule itself is,

[00:02:00]
>> Evan You: this.$options.rules[key], right, this is the actual rule,
>> Evan You: And I'll just ignore the, mm, there's some syntax over here, okay, all right. So now what we wanna do is, for each rule [COUGH] we want to watch the corresponding property on the instance, right? So we use this $watch key, if you've never used $watch before, just look it up in the API.

[00:02:34]
This allows us to call a callback whenever this watch property changes. And it takes a callback which takes a new value.
>> Evan You: We don't really care about the old value, so we'll just ignore it. [COUGH] So because we have the new value, what we need to do with the new value, the value has changed, all right?

[00:02:57]
So the new value, we want to do rule.validate(newValue). Notice that the validate takes a value and returns a Boolean, all right, so, result.
>> Evan You: Our validation result, so if the result is not true,
>> Evan You: The validation has failed, and now we need to log the message.
>> Evan You: And this is pretty much it.

[00:03:33]
So really this exercise is partially about understanding the boilerplate of how to apply global functionality via a plugin. The other part is, know that inside the plugin you can basically do anything. And it's really about knowing what APIs to use to achieve the end result. So a lot of times when you design a plugin, it's probably a good idea to start with the desired API.

[00:04:03]
Start think about what would be a good experience if we want others to use the plugin. And then you figure out how you can achieve that goal by going through the existing API service of Vue, using these low level primitives. Assemble them together inside the plugin to provide some higher-level abstract functionality that can be reused and shared across multiple applications.

[00:04:27]
So this just a very, very simple example. In fact in the afternoon we're gonna expand on this one and make it into something actually more useful.