Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates
You add array of todos to the store simply by adding them to the state defined in your store/index.js file. You can access the array of todos using mapState then loop through and display them with v-for. This lesson walks you through the process of setting up todos in Vuex and displaying them in your Vue.js template.
[00:00] To add todos to our store we can just go ahead and delete the increment decrement and replace counter with todos. I'll add a task of eat and then duplicate this and change it to sleep and code. Just like we displayed the counter by mapping state, I can go ahead and display the todos in the same way. Todos.
[00:19] I'll get rid of these map mutations because I don't need them. Could also delete the buttons so that I can put in my todos, hit Save, and you'll see an array of todos rendered on the page. To style this a bit. I'm going to go to tachyons.io and go to the components and down to the lists.
[00:35] This list looks great so I'll just go here, scroll down, copy the HTML -- it's just HTML and some Tachyon classes -- and then I'll go ahead and paste that into my Index view. I'll clean up the formatting a little bit and just remove the padding I had before.
[00:50] Now, when I hit Save I'll have that same exact component -- I'll make this a bit smaller -- and that same component from tachyons.io. Now I can delete all the other list elements except for the one I need. I'll add a v4 attribute and say todo of todos, the todo being each todo in the array.
[01:09] Instead of this Mackerel tabby I can just go ahead and make that todo.task. When I hit Save now you'll see eat, sleep, and code and I'll remove this cats, replace it with todos, so now we have todos. To learn more about all these Tachyon classes you see here, just go to tachyons.io. There's a great list of them on the table of styles.