[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>
[Nuxt] Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js的更多相关文章
- Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
- vue.js 服务端渲染nuxt.js反向代理nginx部署
vue.js的官方介绍里可能提到过nuxt.js,我也不太清楚我怎么找到这个的 最近项目vue.js是主流了,当有些优化需求过来后,vue还是有点力不从心, 比如SEO的优化,由于vue在初始化完成之 ...
- [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 ...
- [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 ...
- [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 ...
- 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 ...
- [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 ...
- [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 ...
- [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 ...
随机推荐
- 分享一个jquery实现的双向选择组件
<html><head> <meta charset="utf-8"> <title>数据删选组件</title> &l ...
- 分享一下事件监听addEventListener----attachEvent的用法
来自:http://www.cnblogs.com/wkylin/archive/2011/10/09/2203161.html 事件监听addEventListener----attachEvent ...
- Regularization —— linear regression
本节主要是练习regularization项的使用原则.因为在机器学习的一些模型中,如果模型的参数太多,而训练样本又太少的话,这样训练出来的模型很容易产生过拟合现象.因此在模型的损失函数中,需要对模型 ...
- C#开发 —— 泛型,文件
泛型的目标是采用广泛适用和可交互性的形式来表示算法和数据结构 —— 参数化 泛型能子啊编译时提供强大的类型检查,减少数据类型之间的显式转换,装箱操作和运行时的类型检查 泛型的类型参数T可以被看作是一个 ...
- jq--图片懒加载
html 1.给图片不给真真意义上的src属性路径,可通过我们自己想要添加时改变它的属性路径即可. 2.要获取浏览器中三种高度. $(window).height();//屏幕高度 $(window) ...
- golang 简单web服务
1.golang print输入 package main import "fmt" func main() { fmt.Printf("Hello World!\n&q ...
- ArcSDE:C#创建SDE要素数据集
转自原文 ArcSDE:C#创建SDE要素数据集 /// <summary> /// 判断指定数据集是否存在 /// </summary> /// <param name ...
- ArcGIS中数据之间的转换接口IFeatureDataConverter2
之前我写过一篇文章关于ArcGIS各种空间数据格式之间转换的通用方法:ArcGIS中sde,mdb,shp数据之间的转换.这里使用的主要接口方法就是用到了IFeatureDataConverter接口 ...
- start_kernel----lcokdep_init
void lockdep_init(void) { int i; /* * Some architectures have their own start_kernel() * code which ...
- Monkey脚本编写
脚本优势:简单.快捷.不需要借助任何工具,可以做简单的性能测试 脚本缺点:只能简单实现坐标.按键等基本操作,无逻辑性 脚本格式: