zoukankan      html  css  js  c++  java
  • [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>
  • 相关阅读:
    文件输入输出的管理以及管道的使用
    文件权限的管理以及acl权限列表
    安装配置Linux Squid代理服务器
    安全强化机制——SELinux
    存储系统管理(二)——Linux系统的swap分区、磁盘加密、磁盘阵列
    存储系统管理(三)——磁盘配额及lvm逻辑卷管理
    存储系统管理(一)——Linux系统的设备和分区管理
    core--线程同步
    Debian字符模式下修改显示分辨率
    core--作业
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7230822.html
Copyright © 2011-2022 走看看