Check out a free preview of the full Introduction to Vue.js course:
The "Challenge 7: Solution" Lesson is part of the full, Introduction to Vue.js course featured in this preview video. Here's what you'd learn in this lesson:

Sarah walks through the solution to Challenge 7.

Get Unlimited Access Now

Transcript from the "Challenge 7: Solution" Lesson

[00:00:00]
>> Sarah Drasner: Okay, same thing. We've got a comment form. It looks exactly the same, but it does not function the same. If we wanted to refactor this, we'd make the store file. One of the first things we'd do is import store from store. We'd have the store here. In the store itself we've moved these comments to the state.

[00:00:21] And then in mutations we have add comment. We are always gonna pass on the state. And then we have comment here. So then when we look at the components themselves, we would go to the app.view. And in here we have, I'm still using that new common as an empty string in the component.

[00:00:43] Because the state doesn't necessary need to have that. It's kind of a temporary unit for us. So not everything needs to move into the store. Some things are not, you know, worthy of going into the store. In this case, this new comment is really just so that we can push material area out.

[00:00:59] So we wouldn't change that. So in our computed value, we're gonna say comments is return this .store.state.comments, so we can access all of the comments and the state. And then we have methods. We have this.store.commit, addComment, this.newComment, and then we clear out this.newComment, which is still in our component.

[00:01:22] So the things that are actually from our store are these comments, and adding comments is a method, which is also a mutation on that store