[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 - data 接收 props 的值
- [Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS
- [Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt
- [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js
- [Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
- [Vue] Use Vue.js Watchers to Respond to Async Updates
- vue.js:拖动四个角及四个边来改变选区大小并移动(vue@3.2.36)
- vue.js 3.2.22:多选上传图片带缩略图可删除
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [Vue-rx] Access Events from Vue.js Templates as RxJS Streams with domStreams
- [Nuxt] Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js
- Atitit vue.js 把ajax数据 绑定到form表单
- three.js(JS 三维模型库)介绍和入门
- vue-ant design示例大全——icon与分隔符本地css/js资源