Vuex loses the state after page reload when using cookies accordingly to documentation

[eeerrrttty]

plugins: [
  createPersistedState({
    storage: {
      getItem: key => Cookies.get(key),
      // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
      setItem: (key, value) =>
        Cookies.set(key, value, { expires: 300000, secure: true }),
      removeItem: key => Cookies.remove(key)
    }
  })
],

[robinvdvleuten]

@eeerrrttty do you use https? Otherwise secure needs to be set to false.

[eeerrrttty]

Yes i do use HTTPS :)

[robinvdvleuten]

Do you have a codesandbox to reproduce the issue?

[eeerrrttty]

Bro, how can i reproduce it ? It has no secrets, you can create a project in a framework you prefer and simple paste my code in the 'plugins' of vuex.

[nkvaratskhelia]

Make sure you don't exceed max cookie size (4096 Bytes). That was a problem I had. No error given but the plugin didn't save data to the cookie.

[szvest]

@eeerrrttty do you use https? Otherwise secure needs to be set to false.

What about the case using localstorage instead of cookies? How do we set it to false?

[eeerrrttty]

I do need large amount of data to be stored

[robinvdvleuten]

@eeerrrttty so if you have a large amount of data, cookies should not be used. Please use LocalStorage for such cases.

[neverender24]

I have the same problem. When page refresh data will not refresh using js-cookies. Making secure: false fix the problem. I'm in localhost

[robinvdvleuten]

@neverender24 it's not a problem; secure: true only works on https, so when developing locally on http your cookies are not set as its not secure.

[solamichealolawale]

I am facing the same issue, this is is my own settings

plugins: [
    createPersistedState({
      paths: ["account.token"],
      key: "token",
      storage: {
        getItem: key => Cookie.getJSON(key),
        setItem: (key, state) =>
          Cookie.set(key, state, {
            expires: 3,
            secure: false
          }),
        removeItem: key => Cookie.remove(key)
      }
    })
  ]

I wanted to save a token that is stored in anaccount.js module for an SPA. Everything works fine, could navigate through all other page using router-link(SPA) but once I reload the whole page, the cookie resets to the default state

[robinvdvleuten]

I am gonna close this issue as all code within the comments contain bugs not related to the plugin. Please move any question related to configuring or setting up the plugin to Stackoverflow or the Vuejs forum.