Display Vuex Data Differently in Each Page of Nuxt and Vue.js
You often use the same data in different ways across pages. This lesson walks you through setting up multiple pages, retrieving the same data, then displaying it for each page's use-case.
[00:00] To finish up the other pages I'll just copy and paste all of this into the Active view. Now when I hit Save if I navigate to active it should look the exact same and have all the same features. Let's remove some of these features. We'll remove the form. We'll call this Active Todos here, and even get rid of the ability to click on the buttons.
[00:23] Now, Active is just a list of active todos. Then if I go back into Home and check off eat, when I go back to active, it's still showing eat. Let's make sure that's filtered out. I can just do this in this computed state here. I'll just say filter out any todo where the todo is complete but not complete, like that.
[00:50] Now, in Active it'll only show us the ones that haven't been completed. Home looks like this. Active looks like this. I'll copy and paste everything from Active into Completed. I'll paste that there. Then I can also clean up the methods. I don't need any of these. I don't need the data. I don't need this Import.
[01:13] My Active view is really short, with just a template and a list that loops through my todos. I'll copy and paste this into my Completed. Select all and paste. Now Completed will just be the same thing except it only wants to show complete ones.
[01:30] Now, if I navigate to Completed, it looks like I accidentally deleted mapState, so let's import that back. mapState from UX and Active will need that as well. Refresh here. Now Completed shows active todos.
[01:49] Let's change that to Completed and we can even get rid of the strike-through on this so that now Completed todos are eat, Active todos are code, and back in Home I can add another build something cool. Read a book.
[02:10] We'll check this off, navigate to Completed. We'll see eat and "build something cool." I can refresh. We'll have the proper things. Go to Active. Have all the proper things there. Then in my terminal I can even just say now and deploy this application.
[02:31] Once that's complete I can just go ahead and open this in a new tab, hit Enter, and now we have this application live online, where I can complete Completed, Active, Home, Delete. Everything works just as expected.
How were you able to delete the import for mapState in the active and completed views? You are using mapState in both of those files. Just curious, my build was failing until I put the import back in.
this is awesome! thank you for your short and useful videos. !