Slide 1

Slide 1 text

Nuxt の Store 永続化の話 2019/05/24 @nyker_goto

Slide 2

Slide 2 text

結論 ● universal の時は cookie storage つかえ ● spa の時は localstorage で OK. ssr: false は要らない

Slide 3

Slide 3 text

じこしょうかい @nyker_goto (twitter) 本業? ● データサイエンティスト (新卒3年目) ● kaggle master なんやかんやで backend/front/インフラもします. 一番フロントが好き。イ ンフラは大変… 3

Slide 4

Slide 4 text

前提条件 ● Nuxt.js + Rest API をつかった一般的?な SPA ○ universal mode (mode = “universal”) ● Rest API は JWT で認証を行う ● 一時的にログイン状況が必要なのではなくどのページでも認証が必要なエン ドポイントを使用する可能性がある (i.e. vuex で token を管理している)

Slide 5

Slide 5 text

こまること ● Store の値はブラウザをリロードすると消える。都度ログインするのはだるい。 → Store の値を保持したい!!! これを永続化 persistenced ~~ といいます

Slide 6

Slide 6 text

vuex の store 永続化 vuex-persistedstate: https://github.com/robinvdvleuten/vuex-persistedstate スターたくさん (3091ぐらい) README.md では nuxt だとこうやれと書いている // nuxt.config.js ... plugins: [{ src: '~/plugins/localStorage.js' , ssr: false }] ... // ~/plugins/localStorage.js import createPersistedState from 'vuex-persistedstate' export default ({store}) => { window.onNuxtReady(() => { createPersistedState ({ key: 'yourkey', paths: [...] ... })(store) }) }

Slide 7

Slide 7 text

このやり方の問題点 local-storage を使っている 初期値では universal mode の時は SSR が有効になっている local(ブラウザ) に到達するまで store は空っぽ 要するにサーバーサイドレンダリングするときには store は空っぽ → サーバー内で token が必要な時ログインしていないことになる (asyncData, や nuxtServerInit, middleware など)

Slide 8

Slide 8 text

なので cookie-storage つかいましょう ( yarn add js-cookie をお忘れなく) import createPersistedState from 'vuex-persistedstate' import * as Cookies from 'js-cookie' import cookie from 'cookie' export default ({ store, req, isDev }) => { createPersistedState ({ key: 'your-application-name' , storage: { getItem: key => process.client ? Cookies.getJSON(key) : cookie.parse(req.headers.cookie || '')[key], setItem: (key, value) => Cookies.set(key, value, { expires: 365, secure: !isDev }), // 365日間 cookie storage を保持する removeItem: key => Cookies.remove(key) } })(store) }

Slide 9

Slide 9 text

注意点と若干の補足 ● Cookie-Storage は secure: true のとき https 通信時のみ有効になります。ちゃん と SSL を付与しておかないと永続化できてねえ?! ってなりますのでご注意 (process.env.NODE_ENV で切り替えるようにしておくと dev の時便利) ● plugins にいれるとき ssr: false にしないでね (サーバー内で store の中身見たいのに実行しないって指定するなんて… ● mode = SPA の時はなんも気にしないでOK. local-storage でも OK だし ssr: false も要らない。

Slide 10

Slide 10 text

結論 ● universal の時は cookie storage つかえ ● spa の時は localstorage で OK. ssr: false は要らない