zoukankan      html  css  js  c++  java
  • [Nuxt] Display Vuex Data Differently in Each Page of Nuxt and Vue.js

    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>
  • 相关阅读:
    下载文档时Safari浏览器下载后出现".html"问题
    实体框架(Entity Frmaework)简介
    系统内置委托:Func/Action
    lambda表达式不使用委托(delegate) 用FUNC
    lambda表达式
    C#生成缩略图 (通用模式)
    从底层角度看ASP.NET-A low-level Look at the ASP.NET...
    网站前端优化
    HTTP协议
    什么是AJAX? AJAX:”Asynchronous JavaScript and XML”中文意思:异步JavaScript和XML。
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7236669.html
Copyright © 2011-2022 走看看