Global http response error handling in vue/axios with vuex

Question

I\'m trying to fix a behavior in my VueJS SPA wherein a limbo state arises. The app doesn\'t know the JWT has already expired and therefore presents itself as if the user is sti

Answer 1

main.js:

import store from './store';

const Instance = new Vue({
  store,
  ...
})

export const { $store } = Instance;

Now you can import { $store } from '@/main.js' anywhere you want. And it's going to be the same instance you have mounted in your app, not a new Vuex.Store({}) (which is what ./store exports, each time you import it somewhere else).

You can export the same way anything else you might want to use in services, tests, helpers, etc... I.e:

export const { $store, $http, $bus, $t } = Instance;