[Nuxt] Display Vuex Data Differently in Each Page of Nuxt and Vue.js

Posted 2020-09-29 Answer1215

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.

 

index.vue:

<template>
  <div>
    <form @submit.prevent="add(task)">
      <input v-model="task" type="text" />
      <input type="submit" value="ADD">
    </form>
    <article class="pa3 pa5-ns">
      <ul class="list pl0 ml0 center mw6 ba b--light-silver br2">
        <li v-for="todo of todos" class="flex items-center ph3 pv3 bb b--light-silver">
          <span v-bind:class="{strike: todo.complete}" class="flex-auto">{{todo.id}} {{todo.task}}</span>
          <button @click="toggle(todo)"><img src="https://icon.now.sh/check" alt="toggle"></button>
          <button @click="remove(todo)"><img src="https://icon.now.sh/trash" alt="delete"></button>
        </li>
      </ul>
    </article>
  </div>
</template>

<script>
  import { mapState, mapActions } from ‘vuex‘
  import {init} from ‘./shared‘

  export default {
    fetch: init,
    computed: {
      ...mapState({
        todos: (state) => state.todos
      })
    },
    data () {
      return {
        task: ‘Some data‘
      }
    },
    methods: {
      ...mapActions([
        ‘add‘,
        ‘remove‘,
        ‘toggle‘
      ])
    }
  }
</script>

 

active.vue:

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

<script>
  import { mapState } from ‘vuex‘
  import {init} from ‘./shared‘

  export default {
    fetch: init,
    computed: {
      ...mapState({
        todos: (state) => state.todos.filter(t => !t.complete)
      })
    }
  }
</script>

 

completed.vue:

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

<script>
  import { mapState } from ‘vuex‘
  import {init} from ‘./shared‘

  export default {
    fetch: init,
    computed: {
      ...mapState({
        todos: (state) => state.todos.filter(t => t.complete)
      })
    }
  }
</script>