Nuxt.jsでCookieを使って閲覧したデータを取得する方法

Nuxt.js専用のモジュールのcookie-universal-nuxtを使用

Nuxt.js用のCookieを扱うためのモジュールがあるので、こちらを利用します。

cookie-universal-nuxt

導入

対象のプロジェクト下で

yarn add cookie-universal-nuxt
or
npm install --save cookie-universal-nuxt

nuxt.config.jsの設定

nuxt.config.js

modules: [
    ['cookie-universal-nuxt', { parseJSON: false }]
],

これで設定は完了

取得するデータをキャッシュに保持(set)

今回は取得するデータがあるページへアクセスしたら、キャッシュに記録されるというもの

cookie.vue

export default {
  created() {
    const setCached = 
    {
      title: 'こんにちは！タイトルをキャッシュします',
      content: 'こんにちは！内容をキャッシュします。'
    }
    this.$cookies.set('article01', setCached, {
      path: '/',
      maxAge: 60 * 60 * 24 * 7
    })
  }
}

setCachedにページ内のデータをセットする。
今回は直接入力しているが、apiから取得したデータ等をセットしたり、dataプロパティと紐づけてもよい

this.$cookie.setでクッキーに入るNameをarticle01に指定し、valueをセットする。

cookieを保持するpathと時間を指定する
これでcookieにセットされます。

cookieに保持されているデータを取得(get)

今度は違うページで取得できるようにしてみる。

index.vue

export default {
  data () {
    return {
      article01: this.$cookies.get('article01')
    }
  },
  computed: {
    article() {
      let post
      if (this.article01) {
        post = JSON.parse(this.article01)
      }
      return post
    }
  }
}

取得したいページのdataプロパティへgetした値をセットする
this.$cookie.get('CookieにセットしたName')で値が取得できる

先ほどオブジェクトでValueをセットしたので、parseしてデータを扱えるようにする。

index.vue

<template>
  <div>
    <article v-if="article">
      <h1>{{ article.title }}</h1>
      <p>{{ article.content }}</p>
    </article>
  </div>
</template>

あとはデータがないときには表示されないようにv-ifを設定し、
値を表示する

これでデータをCookieへsetしgetするまでができるようになります。

値は配列にしてもいいし、そのままStringでわたしてもいいし、それぞれ使いやすい形式でいれてください

まとめ

cookie周りの設定が結構簡単にできるので、導入しやすいと思います。

あとはデータの取得周りでエラーがでないように条件分岐等を使っていくといいかなと思います。

数を指定して例えば3つとかを閲覧したページ順に入れつつ更新とかもできるので、直近の閲覧履歴とかデータベースにいれなくても履歴にのこすこともできる点がいいと思った。