robinvdvleuten / vuex-persistedstate

💾 Persist and rehydrate your Vuex state between page reloads.
https://npm.im/vuex-persistedstate
MIT License
5.76k stars 375 forks source link

Storage option with Js cookie stops working suddenly #435

Open zahidhasanemon opened 2 years ago

zahidhasanemon commented 2 years ago

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. cookie auth request mutation auth success mutation

shweinfeld commented 2 years ago

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.