[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>
时间: 2024-12-24 17:31:27

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

[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 @submit.prevent syntax to avoid that behavior. Then wire together the @submitevent with an add Vuex action to handle an async post to an api. This lesson wa

[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 page-based routing system that follows your file structure. Combine these two projects and you'll have a Vue app created from scratch deployed in a m

[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 resolve data before displaying the page. This allows the server to fetch the data and render the page once it's ready. <template> <section class="c

[Nuxt] Setup a &quot;Hello World&quot; 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 index.js file inside store folder: import Vuex from 'vuex' const store = () => new Vuex.Store({ state: { counter: 0 } }) export default store Display the

[Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js

You'll begin to notice as you build out your actions in Vuex, many of them will look quite similar. Creating a remove action looks almost the same as the add action except for using the axios.delete method then filtering out the deleted todo once the

[Nuxt] Display Vuex Data Differently in Each Page of Nuxt and Vue.js

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=&q

vue路由--1基本使用

路由的引用 npm install vue-router 如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:(先导入,再注册) import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 基本使用示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

[技术翻译]使用Nuxt生成静态网站

本周再来翻译一些技术文章,本次预计翻译三篇文章如下: 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt) 05.[译]Web网页内容是如何影响电池功耗的(How Web Content Can Affect Power Usage) 06.[译]在现代JavaScript中编写异步任务(https://web.dev/off-main-thread/) 我翻译的技术文章都放在一个github仓库中,如果觉得有用请点击star收藏.我为什么

Nuxt 2 即将来临

原文出处: ?? Nuxt 2 is coming! Oh yeah! – Nuxt.js – Medium [https://medium.com/nuxt/nuxt-2-is-coming-oh-yeah-212c1a9e1a67] 1.4.0发布25天后,Nuxt2就即将来临.超过330次提交,320次更改文件,8,200次添加和7,000次删除(不包括其他nuxt repositories)!好吧,似乎很多变化,但不用担心,我们会尽最大努力减少breaking changes的数量,更多