📥

【Nuxt.js】store永続化(vuex-persist)

2021/06/17に公開約1,400字

この記事は何

基礎的な使い方しかしていないですが、vuex-persistを使ってstoreを永続化した際の手順覚書を残します。
一部のstateだけを残したい人に刺さるやもです。

本題の前に:persistとpersistedstateは何が違うんじゃろ

  • vuexのstoreを永続化するモジュールは、ざくっと調べる限りvuex-persistvuex-persistedstateがあります。
  • 機能的な違いは正直分からない…。(詳しい方いたらコメント下さい)
  • サイズやトレンドを比較してみるぐらいでしょうか…?

うん、そこまで大差ない。名前の短い方でいいや🙄

プロジェクトへの導入

install

npm i vuex-persist

plugin

例えばyourStateというstateだけを永続化したい場合は下記のようにプラグインを作成します。なおyourStateの値を変えるためのsetYourStateというmutationも定義済みとします。

~/plugins/vuex-persist.js
import VuexPersistence from 'vuex-persist'

export default ({ store }) => {
  new VuexPersistence({
    storage: window.localStorage,
    reducer: (state) => ({ yourState: state.yourState }),
    filter: (mutation) => mutation.type === 'setYourState',
  }).plugin(store)
}
  • 特定のstateだけを保存する際のポイントは、reducerで保存したいstateを指定しつつ、filterでそのstateを操作するためのmutationを指定することです(だと思います)。
    • filterは指定しなければdefault Trueなので何も考えなくても良いかもしれません。私は試していませんが…。

nuxt config

クライアントサイドでしか処理しないので、ssr:falseとするところぐらいがポイントでしょうか。

~/nuxt.config.js
export default{
  plugins: [
    { src: '~/plugins/vuex-persist.js', ssr: false },
  ],
}

おわりに

上記手順で当方テストはパスしましたが、何か誤りがあればコメントを是非下さい。

なお、vuex-persistedstateの場合の手順は既に記事がありましたので、リンクを貼らせて頂きます。

https://zenn.dev/kokota/articles/3eaf6de2a22e29
GitHubで編集を提案

Discussion

ログインするとコメントできます