[Nuxt] Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js

Posted Answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[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的主要内容,如果未能解决你的问题,请参考以下文章

[Nuxt] Update State with Vuex Actions in Nuxt.js

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

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

如何修复此错误 [Vue warn]: Unknown custom element: <nuxt-link> in unit testing with Jest

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

nuxt.js 封装axios