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>
  • 相关阅读:
    VS.NET2005中的源代码管理
    IE6升级后需要激活ActiveX控件的解决办法
    SQL Server的数据库开发工具
    今天更新了ActiveSync4.2
    永远等你先挂电话
    这回软设考试通过了!
    在Windows2003中FSO组件不能使用的问题
    七天的假期好长哟!
    发现博客园的一个Bug 存为草稿后就找不到了
    MySQL服务不能启动的解决方法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7236669.html
Copyright © 2011-2022 走看看