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>

[Nuxt] Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js的更多相关文章

  1. Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

  2. vue.js 服务端渲染nuxt.js反向代理nginx部署

    vue.js的官方介绍里可能提到过nuxt.js,我也不太清楚我怎么找到这个的 最近项目vue.js是主流了,当有些优化需求过来后,vue还是有点力不从心, 比如SEO的优化,由于vue在初始化完成之 ...

  3. [Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt

    The default behavior of submitting an HTML form is to reload the page. You can use the Vue.js @submi ...

  4. [Vue] Build Vue.js Apps with the Vue-CLI and Nuxt.js

    The vue-cli allows you to easily start up Vue projects from the command line while Nuxt.js enables a ...

  5. [Vue] Preload Data using Promises with Vue.js and Nuxt.js

    Nuxt.js allows you to return a Promise from your data function so that you can asynchronously resolv ...

  6. Nuxt / Vue.js in TypeScript: Object literal may only specify known properties, but 'components' does not exist in type 'VueClass'

    项目背景, Nuxt(vue), TypeScript 生成完项目框架, 添加测试demo页面. 在生成的模板代码中添加layout配置如下: <script lang="ts&quo ...

  7. [Nuxt] Build a Navigation Component in Vue.js and Use in a Nuxt Layout

    You can isolate parts of templates you want to re-use into components, but you can also reuse those ...

  8. [Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt

    Install: npm install -g vue-cli Init project: vue init nuxt/starter . Run: npm run dev Create a inde ...

  9. [Vue] Create Vue.js Layout and Navigation with Nuxt.js

    Nuxt.js enables you to easily create layout and navigation by replacing the default App.vue template ...

随机推荐

  1. 4.Maven之(四)Maven命令

    转自:https://blog.csdn.net/u012152619/article/details/51473410

  2. 51Nod 圆与三角形

    给出圆的圆心和半径,以及三角形的三个顶点,问圆同三角形是否相交.相交输出"Yes",否则输出"No".(三角形的面积大于0).   Input 第1行:一个数T ...

  3. C/C++(结构体)

    结构体(struct) 从某种意义上说,会不会使用struct,如何使用struct是区别一个开发人员是否具备丰富开发经验的试金石. 处理由不同类型成员构成的构造类型,要采用结构体的方式. 定义:关键 ...

  4. 我的第一个Django项目

    1.创建Django项目 命令:django-admin startproject 项目名 注意:创建应用必须先进入虚拟环境. 项目目录如下: 目录层级说明: __init__.py: 说明demo0 ...

  5. ElasticSearch 5.2.2 集群环境的搭建

    在之前 ElasticSearch 搭建好之后,我们通过 elasticsearch-header 插件在查看 ES 服务的时候,发现 cluster-health 显示的是 YELLOW. Why? ...

  6. Gym - 100548C The Problem Needs 3D Arrays

    Problem C.   The Problem Needs 3D Arrays Time Limit: 6000MS Memory Limit: 262144KB 64bit IO Format: ...

  7. python生成md5, shell生成md5

    echo -n 'aaa'|md5sum|cut -d ' ' -f1 python用hashlib md5=hashlib.md5(mid.upper()).hexdigest().upper()

  8. iOS应用笔记之git的本地使用

    什么是git (1)什么是git >git是一个 "分布式"的版本号控制工具 >git的作者是Linux之父:Linus Benedict Torvalds,当初开发g ...

  9. UnrealEngine4针对游戏模式的思考

    游戏能够概括为三类:单进程联机(超级玛丽).小规模联机(魔兽争霸.CS),大规模联机(魔兽世界). watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmx1c ...

  10. if 的理解

    1. if 实现集合的划分 比如著名的 Prim 算法(最小生成树),从某一确定的点出发,每次新加入的点,都是在已访问过的结点(u∈U)和未访问过(v∈V−U)的结点之间的边.这里的未被访问(V−U) ...