nuxt優雅的使用keep-alive

在作 nuxt 項目中，頁面緩存的問題一直是比較頭疼的一件事，這個問題我 google 很久也並無收穫，幾乎都是很粗暴的告訴你使用 keep-alive，也無論相關的坑。

本篇將把我在nuxt中keep-alive的使用心得分享，但願能夠幫助你更優雅的去處理頁面緩存問題。

---

layouts 添加 keep-alive

• 首先創建nuxt項目
• 在./layouts/default.vue添加 keep-alive

  <template>
    <div>
      <nuxt keep-alive />
    </div>
  </template>
  複製代碼

---

處理 asyncData

由於加上keep-alive後asyncData依然會在路由切換的時候觸發，規避這種問題咱們作一個簡單的處理

// ./pages/index.vue
export default {
  async asyncData({ app, store, error }) {
    if (!process.server) return
    const params = {
      pageNum: 1
    }
    const { data } = await app.$getPostList(params)
    return { postList: data.result, pageNum: 2 }
  },
  data() {
    return {
      pageNum: 1,
      postList: []
    }
  },
  mounted() {
    if (this.$store.state.is_browser_first) {
      this.$store.commit('saveBrowserFirst', false)
    } else {
      const params = {
      pageNum: this.pageNum
    }
    const { data } = await app.$getPostList(params)
    this.postList = data.result
    }
  }
}
複製代碼

解釋一下這段js中須要注意的點

• asyncData
  • if (!process.server) return 若是非服務端環境直接retuen。將asyncData只控制在服務端環境觸發能爲咱們省去很多麻煩的事情。
• data
  • 在data中還要定義一次屬性是由於若是不定義，在瀏覽器環境A頁面進入B頁面，B頁面會報錯屬性不存在，緣由是 asyncData 沒觸發。
• mounted
  • if (this.$store.state.is_browser_first){},is_browser_first是我在vuex(./store/index.js)中定義的，默認值爲true,主要目的是記錄是不是第一次進入瀏覽器，若是是是就將is_browser_first設爲false,也就是saveBrowserFirst方法。

---

vuex

// ./store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = () =>
  new Vuex.Store({
    state: {
      is_browser_first: true
    },
    mutations: {
      saveBrowserFirst(state, type) {
        state.is_browser_first = type
      }
    }
  })

export default store
複製代碼

---

現存的問題

• error page
  • 當咱們經過error({ statusCode: 404 })方法進入錯誤頁面後，若是經過路由返回，再進入同等級路由頁面時，頁面仍是錯誤頁面樣式。個人作法是不經過路由返回，經過location方法。

若是你有更好的解決方案歡迎與我交流，但願這篇能夠幫助到爲此事而頭痛的coder。