Nuxt.jsでのkeep-aliveを使ったコンポーネントキャッシュ

Naoki Machida

Vue.jsでは、別ページに遷移すると、遷移元のコンポーネントは削除されてしまいますが、それを防ぐために、keep-aliveという機能があります。 本稿では、その機能をNuxt.jsで使う方法を説明します。

Keywords

  • Nuxt.js

Contents

  • 1. keep-alive
  • 2. 参考URL

keep-alive

keep-aliveを使うと、コンポーネントのキャッシュができます。下記の例では、pages/Example.vueに初回に遷移した場合は、createdが呼ばれますが、2回目に遷移した場合は、Example.vueのVueインスタンスのキャッシュが使用されるため、createdは呼ばれなくなります。

また、keepAliveProps(Nuxt.js 2.4以降)で、キャッシュのためのオプションがあります。

  • include: キャッシュ対象のコンポーネントの指定
  • exclude: キャッシュ対象外のコンポーネントの指定
  • max: キャッシュするコンポーネントの最大個数

layouts/default.vue

<template>
  <div>
    <nuxt keep-alive :keep-alive-props="{include: cachePageList, max: 2}"/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cachePageList: ["NameOfComponent"],
    }
  },
}
</script>

pages/Example.vue(キャッシュ対象のcomponent)

<template>
  <div>
    Hello, World
  </div>
</template>

<script>
export default {
  name: "NameOfComponent",
  created(){
    console.log("created!");
  }
}
</script>

参考URL