Nuxt.jsでクイズページを作る その2

Nuxt.jsでクイズページを作るシリーズの第２回目です。

Nuxt.jsでクイズページを作る その１
https://note.com/landingapps/n/nd8118ea75e72

前回は入力されたクイズの答えを判定し、正解なら表示を変更するところまで作りました。
クイズのページを作る場合、１問目に正解すると２問目に行けるというような場合が多いですね。
今回はそういったページを作ってみます。

クイズに正解したことを記録する

トップページにはクイズが３問ありますが、扉にはロックがかかっていて、１問正解するごとにロックが解除されるようにします。
そのためには、各ページのクイズに正解したかどうかをどこかに覚えておく必要があります。

１問目のページで正解したことをトップページからも知ることができるように、vuexのstoreという仕組みを使います。

Vuex 入門
https://vuex.vuejs.org/ja/guide/

storeというフォルダを作成し、その中に index.js というファイルを作ります。
Nuxt.jsならこれで自動的にstoreの仕組みを作ってくれます。

index.jsの中身はこんなふうにします。

export const state = () => ({
 isClear1: false,
 isClear2: false,
 isClear3: false
})

export const getters = {
 isClear1: state => state.isClear1,
 isClear2: state => state.isClear2,
 isClear3: state => state.isClear3
}

export const mutations = {
 setClear1 (state) {
   state.isClear1 = true
 },
 setClear2 (state) {
   state.isClear2 = true
 },
 setClear3 (state) {
   state.isClear3 = true
 }
}

state の項目が実際の変数、 getters はそれを参照するための関数、 mutations は変数の値を変更するための関数です。
gettersを使わずに、stateをそのまま参照することもできるので、今回は少々冗長ですが、gettersは変数の値を計算したい場合などに利用できますので、念のためにこうしておきます。

storeを利用する

storeで設定した値は、それぞれのvueファイルから次のようにアクセスします。

値を参照したい場合
this.$store.getters.isClear1

値を変更したい場合
this.$store.commit('setClear1')

これを元に、前回作成したクイズのページを、store を参照するように書き換えてみます。

<script>
export default {
 name: 'Q1',
 data () {
   return {
     keywords: ['たこ', 'タコ', 'tako'],
     badanswer: false,
     answer: ''
   }
 },
 computed: {
   isClear () {
     return this.$store.getters.isClear1
   }
 },
 methods: {
   check (answer) {
     let isCorrect = false
     for (const keyword of this.keywords) {
       if (keyword === answer.toLowerCase()) {
         isCorrect = true
         this.$store.commit('setClear1')
         break
       }
     }
     if (isCorrect === false) {
       this.badanswer = true
     }
   }
 }
}
</script>

scriptに computed という項目が増え、data から clear という変数がなくなりました。
使用するときは clear の代わりに isClear を利用します。

トップページを store を利用して作成する

このcomputedと同じものをトップページの index.vue にも作ってあげると、前回やったように isClear の変数で扉のロック画像を切り替えられます。

<template v-if="isClear1">
 <nuxt-link to="/jkv75gaka">
   <img src="/door.png">
 </nuxt-link>
</template>
<template v-else>
 <img src="/door_locked.png">
</template>

<script>
export default {
 name: 'HomePage',
 computed: {
   isClear1 () {
     return this.$store.getters.isClear1
   },
   isClear2 () {
     return this.$store.getters.isClear2
   }
 }
}
</script>

store の値を永続化する

これまで利用していた store の値は、ブラウザを閉じると失われてしまいます。
２問目を解こうと思ってブラウザを開いたら、また１問目からやり直しになったらめんどくさいですよね。
そこでこの値を保存(永続化)してみましょう。

今回のNuxtプロジェクトは Universalモード(SSR)で作りました。
SSRの場合にstoreを永続化するには、cookieを利用します。

Nuxt.js で SSR 時にも永続化された store の値を使う
https://qiita.com/nyk510/items/d184be3724c52713ac90

ここに書いてあるように、plugins/cookie-storage.js ファイルを作成し、nuxt.config.js の pluginsに記述します。
サンプルでは365日間保存するようにしていますが、今回は10年間保存するようにしてみました。

Cookies.set(key, value, { expires: 365 * 10, secure: !isDev }),

20年以上でも良かったのですが、2038年問題で、2038年以降を指定するとうまく動かないようです。

完成

完成したサンプルはこちらです。
https://nuxt-quiz-sample2.web.app/
よく見る感じですね！

画像はいつもお世話になっているイラストACさんからいただきました。

ソースはGitHubに置きました。
https://github.com/krsw9215/nuxt-quiz-sample2