vuex-persistedstate
vuex-persistedstate copied to clipboard
Storage option with Js cookie stops working suddenly
I was working with vuex-persistedstate
version 4.0.0 (tried 4.1.0 as well) and used js cookie as the storage option. my auth credentials were stored in the vuex cookie. but since yesterday, store value is not updating with login. what went wrong suddenly?
vuex-persistedstate: 4.0.0
js-cookie: 3.0.1
store index
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import Cookies from 'js-cookie'
// Modules
import app from './app'
import auth from './auth'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
app,
auth,
},
plugins: [
createPersistedState({
paths: ['auth'],
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, { expires: parseInt(process.env.VUE_APP_MAX_TOKEN_CACHE_TIME), secure: false }),
removeItem: key => Cookies.remove(key),
},
}),
],
strict: process.env.DEV,
})
auth module
import axios from '@axios'
export default {
namespaced: true,
state: {
status: '',
token: '',
userData: {},
},
mutations: {
auth_request(state) {
state.status = 'loading'
},
auth_success(state, { accessToken, userData }) {
state.status = 'success'
state.token = accessToken
state.userData = userData
},
auth_error(state) {
state.status = 'error'
state.token = ''
state.userData = {}
},
update_image(state, { userImage }) {
state.userData = { ...state.userData, image: userImage }
},
logout(state) {
state.status = ''
state.token = ''
state.userData = {}
},
},
actions: {
login({ commit }, user) {
return new Promise((resolve, reject) => {
commit('auth_request')
axios
.post('login', user, { withCredentials: true })
.then(response => {
// eslint-disable-next-line prefer-destructuring
const { accessToken, userData } = response.data
commit('auth_success', { accessToken, userData })
resolve(response)
})
.catch(err => {
commit('auth_error')
reject(err)
})
})
},
},
getters: {
isLoggedIn: state => !!state.token,
authStatus: state => state.status,
},
}
in login actions commit('auth_request')
works well. it sets state status to loading. but in axios request commit('auth_success', { accessToken, userData })
not setting value in state. i can get values using console log in auth_success
mutation and see them in vue dev tools as well but in browser cookie, value does not update. if i don't use cookie as storage, all things works well. all data in mutations are set in local storage.
I am having the same issue using vuex-persistedstate v.4.1.0
and js-cookie v.3.0.1
. Values are updated in the dev tools, but the cookie value does not update.