Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt の Store 永続化の話

Nuxt の Store 永続化の話

Yamaguchi Takahiro

May 24, 2019
Tweet

More Decks by Yamaguchi Takahiro

Other Decks in Technology

Transcript

  1. 結論 • universal の時は cookie storage つかえ • spa の時は

    localstorage で OK. ssr: false は要らない
  2. じこしょうかい @nyker_goto (twitter) 本業? • データサイエンティスト (新卒3年目) • kaggle master

    なんやかんやで backend/front/インフラもします. 一番フロントが好き。イ ンフラは大変… 3
  3. 前提条件 • Nuxt.js + Rest API をつかった一般的?な SPA ◦ universal

    mode (mode = “universal”) • Rest API は JWT で認証を行う • 一時的にログイン状況が必要なのではなくどのページでも認証が必要なエン ドポイントを使用する可能性がある (i.e. vuex で token を管理している)
  4. 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) }) }
  5. このやり方の問題点 local-storage を使っている 初期値では universal mode の時は SSR が有効になっている local(ブラウザ)

    に到達するまで store は空っぽ 要するにサーバーサイドレンダリングするときには store は空っぽ → サーバー内で token が必要な時ログインしていないことになる (asyncData, や nuxtServerInit, middleware など)
  6. なので 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) }
  7. 注意点と若干の補足 • Cookie-Storage は secure: true のとき https 通信時のみ有効になります。ちゃん と

    SSL を付与しておかないと永続化できてねえ?! ってなりますのでご注意 (process.env.NODE_ENV で切り替えるようにしておくと dev の時便利) • plugins にいれるとき ssr: false にしないでね (サーバー内で store の中身見たいのに実行しないって指定するなんて… • mode = SPA の時はなんも気にしないでOK. local-storage でも OK だし ssr: false も要らない。
  8. 結論 • universal の時は cookie storage つかえ • spa の時は

    localstorage で OK. ssr: false は要らない