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>
  • 相关阅读:
    [转] 程序集和Dll的区别
    [转载] 节选自:2005年件我的第一次软件行业创业,烧掉30万、2年时间打水漂的惨痛教训总结
    [分享]屏幕取色工具
    LINQ学习笔记
    XP系统 mscorsvw.exe进程 占CPU资源 开机加载网络连接很慢 解决方法
    [原创] ASP.NET中事件执行顺序
    CHARINDEX, INSTR
    [转载]如何为自己的网站设置二级域名?
    [转载] System.Threading.Timer类的TimerCallback 委托
    [转载]ASP.NET 2.0 页面事件执行顺序
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7236669.html
Copyright © 2011-2022 走看看