Nuxt の Store 永続化の話

Nuxt の Store 永続化の話

C4c6c7b4fdf9285bcf12c5caa58c8d53?s=128

Yamaguchi Takahiro

May 24, 2019
Tweet

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 は要らない