社会人から始めたプログラミング

プログラミング、エンジニアに関することでの備忘録、シェアしたい情報などを共有するためのブログです。

nuxtでvuex-persistedstate使うときの設定参考

問題

以前設定して動いてた気がするけど、動かなくなった。

再度設定。

こちらを参照して、 vuex-persistedstate with Nuxtjs · Issue #54 · robinvdvleuten/vuex-persistedstate · GitHub

プラスで、paths と key を設定すればおけ。 ex)

import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const cookieStorage = {
  getItem: (key) => {
    return Cookies.getJSON(key, { samesite: 'lax' })
  },
  setItem: (key, value) => {
    return Cookies.set(key, value, { expires: 365, samesite: 'lax' })
  },
  removeItem: (key) => {
    return Cookies.remove(key)
  }
}

export default (context) => {
  createPersistedState({
    key: 'cookieのtopのプロパティ名',
    paths: ['xxx.yyy', 'zzz'], // モジュール名.プロパティ名
    storage: cookieStorage,
    getState: cookieStorage.getItem,
    setState: cookieStorage.setItem
  })(context.store)
}

こちらも参照:

Nuxt.jsのストアをモジュールモードで使用するときのTips - Qiita