CODEWITHSUNDEEP
vue.jsvuexjs-cookie
user3084526
user3084526

Reputation: 35

Vuex with Cookie Storage loses state after Page Refresh

I'm using Vuex with cookie storage, but when I do a F5 page refresh the state is lost. I can't figure out why.

I've tried toggling the "secure" option from "true" and "false", but it doesn't fix it. I'm testing on my local environment with IIS.

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

export default new Vuex.Store({

strict: true,
plugins: [

    createPersistedState({
        storage: {
            getItem: key => Cookies.getJSON(key),
            setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
            removeItem: key => Cookies.remove(key)
        }
    })
],

actions,
modules: {

    module1,
    module2,
    module3,
    module4,
    module5,
    module6,
    module7,
    module8,
    module9
}

});

I expect the state to be rehydrated after a page refresh.

Upvotes: 2

Views: 3504

Answers (1)

user3084526
user3084526

Reputation: 35

Sorry for the late response. Thanks fstep for your response. The issue is the "getJSON" method deserialized the JSON string and "vuex-persistedstate" library expected the JSON string. Once I changed the this line:

getItem: key => Cookies.getJSON(key)

to this:

getItem: key => Cookies.get(key)

The problem was solved on some of my modules.

I also added multiple cookies and reduced the state that was being persisted to the cookies. One other thing that was causing me issues is I didn't declare all my fields in the state objects. The documentation does state to do this because they are reactive like Vue.js data objects.

Hope this helps anybody who gets stuck like I did.

Upvotes: 1

Related Questions