Vuex mutation running but the state is not being updated - vue.js

Question

I am using vuex store for state management. Basically I want to set a global app loading state for all requests and use axios interceptors to set the loading state instead of doing this manually for each request.
I have my store as shown below: NOTICE THE CONSOLE LOGS
export default store(function (/* { ssrContext } */) {
const Store = createStore({
state() {
return {
appLoading: false
}
},
mutations: {
toggleAppLoader(state, payload) {
console.log('setting state to ', payload, ' from ', state.appLoading)
state.appLoading = payload
}
},
// enable strict mode (adds overhead!)
// for dev mode and --debug builds only
strict: process.env.DEBUGGING
})
return Store
})
Now in my axios boot.js file in the interceptors, I have this:
import store from '../store/index'
export default boot(({ app }) => {
api.interceptors.request.use(
function (config) {
// Do something before request is sent
store().commit('toggleAppLoader', true)
console.log('State set to true: ', store().state.appLoading)
return config
},
)
});
See attached screenshot of the console logs
You will notice that when I fetch the state immediately, the value is not updating as stated.

Answer 1

Not sure but it seems that every time you call store(), a new store instance is created.
Try changing your function to
const localStore = store();
localStore.commit('toggleAppLoader', true)
console.log('State set to true: ', localStore.state.appLoading)
return config
If my guess is correct then it's fixed this way, but in other contexts (components or basically everywhere else) you will be still instantiating new stores. You'll probably need to make a global instance.
What you have in your store file is actually a factory. To make it work as a global instance, just use:
const globalStore = createStore(........);
export default globalStore;
And import it elsewhere afterwards;
import globalStore from 'yourfile';
And use it calling f.e. globalStore.state.appLoading