Vuex-persistedstate: vuex state 'tokens' not saved to cookie in debug mode

Created on 28 Feb 2017  ·  5Comments  ·  Source: robinvdvleuten/vuex-persistedstate

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()]
})
question

Most helpful comment

@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}) })

All 5 comments

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

@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" }

@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)
})

@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}) })

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

Was this page helpful?
0 / 5 - 0 ratings