📥
【Nuxt.js】store永続化(vuex-persist)
この記事は何
基礎的な使い方しかしていないですが、vuex-persistを使ってstoreを永続化した際の手順覚書を残します。
一部のstateだけを残したい人に刺さるやもです。
本題の前に：persistとpersistedstateは何が違うんじゃろ
- vuexのstoreを永続化するモジュールは、ざくっと調べる限り
vuex-persistとvuex-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の場合の手順は既に記事がありましたので、リンクを貼らせて頂きます。
Discussion