[Nuxt] Display Vuex Data Differently in Each Page of Nuxt and Vue.js
2023-09-14 08:59:18 时间
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>
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- 结合Vue.js的前端压缩图片方案
- JS框架_(JQuery.js)圆形多选菜单选项
- JS框架_(Vue.js)带有星期日期的数字时钟
- Vue.js基础体验(一)
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS
- [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js
- vue.js3: js下载图片的两种方式:url和canvas(vue@3.2.37)
- vue.js 3.2.20: 用rem实现移动端和pc的兼容
- [Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS
- [Nuxt] Display Vuex Data Differently in Each Page of Nuxt and Vue.js
- [Nuxt] Build a Navigation Component in Vue.js and Use in a Nuxt Layout
- [Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt
- vue.js项目在nginx上部署:使spring后端记录真实ip地址
- win10 安装vue 详解-包括node.js、npm、webpack
- Vue中组件化编码 完成任务的添加、删除、统计、勾选需求(实战练习三完结)
- vue.js中引入图片
- Vue.js中 watch 的高级用法
- 基于Java+SpringBoot+Vue前后端分离小区管理系统设计与实现