提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates

VueJS to in The and of Data
2023-09-14 09:00:51 时间

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>

 

相关文章