[Nuxt] Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js
Because Nuxt renders pages on the server, you should use the nuxt-link
components to navigate between pages. Each time a page loads, you can check if you're on the client or server and avoid doing unnecessary loading based on how the page was rendered. This lesson walks you through using nuxt-link
and isClient
to navigate and avoid reloading data.
'fetch' can do server side rendering:
async fetch ({store, redirect, error}) { try { const res = await axios.get('https://todos-cuvsmolowg.now.sh/todos') store.commit('init', res.data) } catch (err) { redirect('/error') } }
Once it successfully store the data inside the store object, we don't need to fetch it again.
To avoid refetching the data, we can use 'isClient' from the context.
async fetch ({store, redirect, error, isClient}) { if (isClient) { return } try { const res = await axios.get('https://todos-cuvsmolowg.now.sh/todos') store.commit('init', res.data) } catch (err) { redirect('/error') } }
Because this fetch method can be reused in elsewhere, so we can make it a sprated file:
shared.js:
import axios from 'axios' export async function init ({store, redirect, error, isClient}) { if (isClient) { return } try { const res = await axios.get('https://todos-cuvsmolowg.now.sh/todos') store.commit('init', res.data) } catch (err) { redirect('/error') } }
Required it in side page:
<template> <div> <nuxt-link to="/computed">Computed</nuxt-link> <article class="pa3 pa5-ns"> <ul class="list pl0 ml0 center mw6 ba b--light-silver br2"> <li v-for="todo of todos" class="ph3 pv3 bb b--light-silver">{{todo.task}}</li> </ul> </article> </div> </template> <script> import { mapState } from 'vuex' import {init} from './shared' export default { fetch: init, computed: { ...mapState({ todos: (state) => state.todos }) } } </script>
Here we use 'nuxt-link' to the navigation.
Computed page should not load the todos again, since we already have the data store in the store object.
computed.vue:
<template> <div> <nuxt-link to="/">Home</nuxt-link> <article class="pa3 pa5-ns"> <ul class="list pl0 ml0 center mw6 ba b--light-silver br2"> <li v-for="todo of todos" class="ph3 pv3 bb b--light-silver">{{todo.task}}</li> </ul> </article> </div> </template> <script> import { mapState } from 'vuex' import {init} from './shared' export default { fetch: init, computed: { ...mapState({ todos: (state) => state.todos }) } } </script>
相关文章
- Vue.nextTick 的原理和用途
- vue.js入门(五,组件更新,计算属性,watch监听)
- VSCODE平台上使用VU3 遇到报错 提示找不到VUE模块
- vue项目中抽离.vue文件中的js代码
- vue.config.js
- vue.config.js常用配置详解
- [Nuxt] Build a Navigation Component in Vue.js and Use in a Nuxt Layout
- [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates
- [Vue] Conditionally Render DOM Elements in Vue.js (v-if v-else v-show)
- [Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
- vue.js3.x安装tinymce 5.8.2并应用(vue 3.0.5)
- 从安装node js到构建一个vue并启动它
- vue+webpack开发(三)
- [Vue-rx] Share RxJS Streams to Avoid Multiple Requests in Vue.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.22:用useIntersectionObserver监控多行数据的可见性(@vueuse/core@7.0.3)
- vue指令:v-once 元素和组件只渲染一次,不会随着数据的改变而改变
- vue项目报错:warning Disallow self-closing on HTML void elements (<img/>)
- Vue.js如何导入新组件
- amCharts 4.8 Crack JS VUE 图表
- events.js:292 throw er; // Unhandled ‘error‘ event,vue项目打包失败
- 解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
- ant-design-vue中a-table列表数据根据点击的表头进行升/降排序
- vue.js