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

作者:dayu

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>

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

原文地址:http://www.cnblogs.com/Answer1215/p/7236669.html