Issue when using js-cookie

[GabotronES]

I'm using the plugin for a cookie consent modal, I'm using namespaced modules on my store, however my state is not persisiting and after accepting cookies I inmediately refresh the tab but modal is still there.

This is my code:

/*
|-------------------------------------------------------------------------------
| VUEX store.js
|-------------------------------------------------------------------------------
*/

//Builds the data store from all of the modules for the app.
//Adds the promise polyfill for IE 11
//require('es6-promise').polyfill();

//Imports Vue and Vuex
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import Cookies from 'js-cookie'

//Initializes Vuex on Vue as a plugin
Vue.use( Vuex )

//Imports all of the modules used in the application to build the data store.
import Auth from './modules/Auth.js';
import CookieModal from './modules/CookieModal.js';

//Exports our data store.
export default new Vuex.Store({
    strict: true, //debug

    modules: { 
        Auth,
        CookieModal,

    },

    plugins: [
        createPersistedState({
            paths: ['CookieModal.cookiesAccepted'],
            storage: {
                getState: (key) => Cookies.get(key), 
                setItem: (key, value) => Cookies.set(key, value, { expires: new Date(new Date().getTime() + 1 * 60 * 1000), secure: false }),
                removeItem: key => Cookies.remove(key),
            },
        }),

    ],
});

And the shape of my state:

//STATE
const state = {
    cookiesAccepted: false
}

//GETTERS
const getters = {

}

//ACTIONS
const actions = {

    acceptCookies({commit}){
        console.log('cookies_accepted');
        commit('ACCEPT_COOKIES');

    },

}

//MUTATIONS
const mutations = {

    ACCEPT_COOKIES(state,) {
        state.cookiesAccepted = true;
    },

}

export default {
  namespaced: true, state, getters, actions, mutations
}

[mattharley]

Sorry this is a little off-topic, but why is storing data to a cookie better than local storage? I read that in the docs and can't understand why it's an advantage?

[kyriediculous]

@mattharley Cookies have a time to live (defaults to duration of browser session)

[mattharley]

@mattharley Cookies have a time to live (defaults to duration of browser session)

Oh thanks for that. Makes sense

[mittalyashu]

I am facing the same problem, it is not saving the state to cookies tab. Is there any way to fix this issue?

[kyriediculous]

Cookie-JS does not adhere to the interface we are used to with localstorage and the like , therefore a customsaveState and restoreState function is needed.

Also do not write your own reducer when using the modules and filter props.

for restoreState you have the option between.get() and .getJSON(), the latter will JSON.parse() the retrieved string for you if you were storing a stringified object like in the example below.

import Cookie from 'js-cookie
const vuexSession = new VuexPersist({
  key: 'knuckle-user',
  storage: Cookie,
  modules: ['user'],
  filter: mutation => (
    mutation.type !== 'user/_walletExists'
  ),
  restoreState: (key, storage) => {
    let item = Cookie.getJSON(key)
    if (item) {
      item.user.wallet = Wallet.fromMnemonic(item.user.wallet.signingKey.mnemonic, `m/99'/66'/0'/0/0`)
      return item
    }
  },
  saveState: (key, state, storage) => state ? Cookie.set(key, JSON.stringify(state)) : ''
})

[robinvdvleuten]

@kyriediculous thanks for answering this question?