Nuxtでのデータ永続化

Pocketの未読件数とかを取得したくてPocketのDeveloper APIを試してる。

Pocket: Developer API

Pocketでは認証情報を取得する過程で取得したcode(リクエストークン)を一時的に保持しておく必要があるらしく、この保存先でちょっと迷うことになった。

最初に思い付いたのはDBだが、今回のケースだとキーにすべき値がちょっと無かったので見送った。

次に見つけたのがvuex-persistedstateを使ってstoreの値をlocalStorage(というかsessionStorage)に保存するやり方。

GitHub - robinvdvleuten/vuex-persistedstate: 💾 Persist and rehydrate your Vuex state between page reloads.

Storage - Web API | MDN

ただし値の書き込みまではうまくいったが、取得がうまくいかなかった。今回のケースではNuxtのcreatedが実行されるあたりで値を取得したかったのだが、どうもその時点ではまだsessionStorageから値を取得できていないらしく、値がnullになっていた。

色々調べた結果、

  1. setTimeoutを使って値が取得できた時点で処理を継続させる方法もあったがちょっとあまり好きではない
  2. 取得の際はsessionStorageから直接値を取得する(getItemでとってくる)方法を見つける
  3. よく考えたら今回のケースでは値の書き込みも直接sessionStorage.setItemでいいことに気づく

ということでvuex-persistedstateを外して直接sessionStorageとやり取りすることにした。

ひとまずこれで動くようにはなったがそもそもOAuthの認証でどの情報をどこまで記憶しておいてよいかどうかちゃんと分かっていない気がするので、以前買ったまま読んでない本とか読んでちゃんと勉強したほうがいい気はしている。