Nuxt の Store 永続化の話

Transcript

1. Nuxt の Store 永続化の話 2019/05/24 @nyker_goto
2. 結論 • universal の時は cookie storage つかえ • spa の時は localstorage で OK. ssr: false は要らない
3. じこしょうかい @nyker_goto (twitter) 本業? • データサイエンティスト (新卒3年目) • kaggle master なんやかんやで backend/front/インフラもします. 一番フロントが好き。イ ンフラは大変… 3
4. 前提条件 • Nuxt.js + Rest API をつかった一般的?な SPA ◦ universal mode (mode = “universal”) • Rest API は JWT で認証を行う • 一時的にログイン状況が必要なのではなくどのページでも認証が必要なエン ドポイントを使用する可能性がある (i.e. vuex で token を管理している)
5. こまること • Store の値はブラウザをリロードすると消える。都度ログインするのはだるい。 → Store の値を保持したい!!! これを永続化 persistenced ~~ といいます
6. 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) }) }
7. このやり方の問題点 local-storage を使っている 初期値では universal mode の時は SSR が有効になっている local(ブラウザ) に到達するまで store は空っぽ 要するにサーバーサイドレンダリングするときには store は空っぽ → サーバー内で token が必要な時ログインしていないことになる (asyncData, や nuxtServerInit, middleware など)
8. なので 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) }
9. 注意点と若干の補足 • Cookie-Storage は secure: true のとき https 通信時のみ有効になります。ちゃん と SSL を付与しておかないと永続化できてねえ?! ってなりますのでご注意 (process.env.NODE_ENV で切り替えるようにしておくと dev の時便利) • plugins にいれるとき ssr: false にしないでね (サーバー内で store の中身見たいのに実行しないって指定するなんて… • mode = SPA の時はなんも気にしないでOK. local-storage でも OK だし ssr: false も要らない。
10. 結論 • universal の時は cookie storage つかえ • spa の時は localstorage で OK. ssr: false は要らない