Vuex Mutation已执行但状态未更新问题求助

我使用Vuex进行状态管理，希望为所有请求设置全局应用加载状态，通过Axios拦截器自动设置该状态，而非为每个请求手动操作。但执行mutation后立即获取状态时，状态并未如预期更新。

Store代码 #

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
})

Axios拦截器代码（boot.js） #

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
    },
  )
});

控制台日志表现 #

执行mutation时，控制台打印出setting state to true from false，说明mutation逻辑本身在执行；但紧接着获取状态的日志显示State set to true: false，状态并未如预期更新为true。

内容的提问来源于stack exchange，提问作者Johhn