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>
  • 相关阅读:
    crystal report 用存储过程的问题。
    新的开始—2014
    C#基础(二)——C#中的构造函数
    C#基础(一)——C#中反斜杠/n与/r的区别
    Html基础(一)
    yield关键字, default关键字, 别名关键字
    让 wpf tabcontrol 延缓初始化每个tab item content
    MVC,MVP,MVVM(补充)
    Focus scope in WPF
    Wpf ItemsControl 开启UI Virtualization 的条件
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7236669.html
Copyright © 2011-2022 走看看