Why I can't save Vuex states with vuex-persistedstate and js-cookie? - vuex

Question

I'm trying to save Vuex states inside Cookies as I see in the documentation. js-cookies and vuex-persistedstate are imported this way:
import createPersistedState from 'vuex-persistedstate'
import Cookies from 'js-cookie'
Saving the states inside LocalStorage works fine:
const store = new Vuex.Store({
state: {
},
mutations: {
},
getters: {
},
modules: {
user,
register,
auth,
},
plugins: [createPersistedState()]
})
Trying to save the states in the Cookies I get no Vuex value:
const store = new Vuex.Store({
state: {
},
mutations: {
},
getters: {
},
modules: {
user,
register,
auth,
},
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(y, value, { expires: 3, secure: true }),
removeItem: key => Cookies.remove(key)
}
}
)]
})
Later edit
Using vuex-persist package all works as expected!
const vuexCookie = new VuexPersistence({
restoreState: (key, storage) => Cookies.getJSON(key),
saveState: (key, state, storage) =>
Cookies.set(key, state, {
expires: 3
})
})
// Store
const store = new Vuex.Store({
state: {
},
mutations: {
},
getters: {
},
modules: {
chestionare,
user,
register,
auth,
},
plugins: [vuexCookie.plugin]
})

Answer 1

Try to change this:
[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(y, value, { expires: 3, secure: true }),
removeItem: key => Cookies.remove(key)
}
}
)]
To this:
[createPersistedState({
key: 'your_key',
storage: {
getItem: (key) => JSON.parse(Cookies.get(key)),
setItem: (key, value) => Cookies.set(key, JSON.stringify(value), {expires: 3, secure: true}),
removeItem: (key) => Cookies.remove(key)
}
})]