[Nuxt] 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.

 

store/index.js:

import Vuex from 'vuex'

const store = () => new Vuex.Store({
  state: {
    todos: [
      {task: 'eat'},
      {task: 'sleep'},
      {task: 'code'}
    ]
  }
})

export default store

 

pages/index.vue:

<template>
  <article class="pa3 pa5-ns">
    <ul class="list pl0 ml0 center mw6 ba b--light-silver br2">
      <li v-for="todo of todos" class="ph3 pv3 bb b--light-silver">{{todo.task}}</li>
    </ul>
  </article>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    computed: {
      ...mapState({
        todos: (state) => state.todos
      })
    }
  }
</script>