Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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つとかを閲覧したページ順に入れつつ更新とかもできるので、直近の閲覧履歴とかデータベースにいれなくても履歴にのこすこともできる点がいいと思った。

showroom
SHOWROOMは、アイドルやアーティストとインターネット上でコミュニケーションが楽しめるライブ動画ストリーミングプラットフォームです。
https://www.showroom-live.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした