store.subscribe not being triggered about vuex-persistedstate

[robinvdvleuten]

@LeonLiber can you please provide a https://jsfiddle.net/ with your situation / example of your setup?

[arliber]

Hi @robinvdvleuten, It's a bit of a complicated setup for jsfiddle so I'll try to post it here.

The core of the store looks like that:

import Vue from 'vue';
import Vuex from 'vuex';
import persistedState from 'vuex-persistedstate';

Vue.use(Vuex);

export default new Vuex.Store({
  plugins: [persistedState({
    paths: ['user'],
  })],
  state: {
    user: { },
  },
  getters: {
    isUserLoggedin(state) {
      return Object.keys(state.user).length > 0;
    },
    user(state) {
      return state.user;
    },
  },
  mutations: {
    SET_USER(state, userData) {
      state.user = userData;
    },
    UNSET_USER(state) {
      state.user = {};
    },
  },
  actions: {
    setUser({ commit }, userData) {
      commit('SET_USER', userData);
    },
    unsetUser({ commit }) {
      commit('UNSET_USER');
    },
  },
});

I want to subscribe to the "resetting" of the user so I can set a default http headers with the proper user token.

This is what I tried:

 store.subscribe((mutation) => {
   console.log('MUTATED', mutation);
});

And I get no log when user is re-set after page refresh.

UPDATE
I think (not tried yet) that I could replace the getState method on init with something like that:

getState = (key, storage) => {
      const value = storage.getItem(key);
     // My custom code to set Axios headers
      return value && value !== 'undefined' ? JSON.parse(value) : undefined;
    }

But it feels like an ugly workaround :(

Would love to hear your thoughts,
Thanks!

[robinvdvleuten]

@LeonLiber so as I try to understand your issue, you are trying to set custom axios headers when your app is initialised right?

[arliber]

@robinvdvleuten Correct. The token I'm going to store in the header is coming from the persistent store so I need to act on the state "rehydration"

[robinvdvleuten]

@LeonLiber why not fetch the correct header from the store when initializing your app (so after the store is dehydrated). Please see both urls for an example;

https://github.com/robinvdvleuten/vue-auth0-vuex/blob/master/template/src/router/index.js#L36
https://github.com/robinvdvleuten/vue-auth0-vuex/blob/master/template/src/router/index.js#L9

This onEnter hook dispatches an event which will fetch a new token. You can use the same pattern for setting the header on axios by fetching the value from the store.