vuex persisted state not updating with mutation globally

Question

I have a persisted vuex state which i want to manipulate now the state does persists on browser refresh which is what i wanted but i also want to clear it out through code whenever i want let me show you the code

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
//importing modules
import modules from './modules'

const persistState = createPersistedState({
  paths: ['firebase','user'],
})

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    ...modules,
  },
  plugins: [persistState],
})

modules/index.js

/** this script will go through your modules and then i will generate an object
 * of each module that will export from store.js
 * */

    import camelCase from 'lodash.camelcase'
    const requireModule = require.context('.', true, /\.js$/)
    const modules = {}
    
    requireModule.keys().forEach((fileName) => {
      if (fileName.match('index.js')) {
        return
      }
    
      const nameSplit = fileName.replace(/(\.\/|\.js)/g, '').split('/')
    
      const [name, sub] = nameSplit
    
      const moduleName = camelCase(name)
    
      const actualFragment = requireModule(fileName)
    
      modules[moduleName] = modules[moduleName] || {}
      modules[moduleName][sub] = actualFragment.default || actualFragment
    })
    
    export default modules

modules/user/actions.js

import router from "@/router/router";
import Request from "@/mixins/BackendRequest";

import {
  USER_REQUEST_START,
  SET_USER,
  USER_REQUEST_ERROR,
  SET_USER_SESSION,
  SET_USER_DATA,
} from "./mutation-types";
import firebase from "firebase/app";
import Vue from "vue";

const actions = {
  setUserData({ commit }, data) {
    commit(SET_USER_DATA, data);
  },
};

export default actions;

modules/user/getters.js

 const getters = {
      user(state) {
        return state
      },
export default getters

modules/user/state.js

const state = {
  loading: false,
  error: null,
  data: {},
  sessionTimeOut: null,
  loggedIn: false,
}

export default state

modules/user/mutations.js

import defaultState from './state'

const mutations = {
  SET_USER_DATA(state, data) {
    if (data === null) {
      state = defaultState
    }
    state = {...state, data}
    console.log(state);
  },
}

export default mutations

this is how I am calling my mutation

 this.$store.dispatch('setUserData', null)

the above mutation SET_USER_DATA/setUserData is being called from code and inside the function body the console.log() does show the updated state as expected but its doesnot update/reflect globally any help?

vuex persisted state not updating with mutation globally

0 Answers