vuex state 'tokens' not saved to cookie in debug mode

[rootsli]

vuex state 'tokens' not saved to cookie in debug mode,the code as following,Are there any wrong?

Reference sample code: https://github.com/robinvdvleuten/vue-auth0-vuex/blob/master/template/src/store/index.js#L14

import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'
import createPersistedState from 'vuex-persistedstate' //vuex持久化localstorage插件
import * as Cookies from 'js-cookie';
import * as state from './state'
import * as mutations from './mutations'
import * as actions from './actions'
import * as getters from './getters'
import menu from './modules/menu'
import login from './modules/login'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
    menu,
    login
  },
  strict: debug,
  plugins: debug ? [createLogger(), createPersistedState({
      paths: ['login.tokens'],
      getState: (key) => Cookies.getJSON(key),
      setState: (key, state) => Cookies.set(key, state, {expires: 300000000, secure: true})
    })] : [createPersistedState()]
})

[robinvdvleuten]

@rootsli have you tried to only use the vuex-persistedstate plugin?

[rootsli]

@robinvdvleuten Yes, but still not work will。The code as following:

my project: https://github.com/rootsli/vue2admin/blob/master/src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate' //vuex持久化localstorage插件
import * as Cookies from 'js-cookie';
import * as state from './state'
import * as mutations from './mutations'
import * as actions from './actions'
import * as getters from './getters'
import menu from './modules/menu'
import login from './modules/login'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
    menu,
    login
  },
  plugins: [
    createPersistedState({
      paths: ['login.tokens'],
      getState: (key) => Cookies.getJSON(key),
      setState: (key, state) => Cookies.set(key, state, { expires: 300000, secure: true })
    })
  ]
})

npm package.json version:

  "dependencies": {
    "element-ui": "^1.2.2",
    "js-cookie": "^2.1.3",
    "vue": "^2.2.1",
    "vue-router": "^2.3.0",
    "vuex": "^2.2.1",
    "vuex-persistedstate": "^1.2.0",
    "whatwg-fetch": "^2.0.2"
  }

[robinvdvleuten]

@rootsli can you verify that the getState/setState methods are called? Like replacing the plugin with the following;

createPersistedState({
  paths: ['login.tokens'],
  getState: (key) => console.log(key),
  setState: (key, state) => console.log(key, state)
})

[rootsli]

@robinvdvleuten the getState/setState methods are called。Modify the code as follows then it work。Please close this bug，thank you very much！

createPersistedState({
      paths: ['login.tokens'],
      getState: (key) => Cookies.getJSON(key),
      setState: (key, state) => Cookies.set(key, state, {expires: 365})
    })

[robinvdvleuten]

@rootsli I see, we both have overlooked the secure property of the cookie. Good to hear it's solved now 😄