Accessing store in Vue Router hooks

[steven-pribilinskiy]

As suggested in https://github.com/vuejs/vue-class-component#adding-custom-hooks we use registerHooks to resolve Vue Router hooks:

  VueClassComponent.registerHooks([
    'beforeRouteEnter',
    'beforeRouteLeave',
    'beforeRouteUpdate',
  ]);

Unfortunately the store properties that are defined with vuex-class are not available within the beforeRouteEnter methods. Any ideas?

[ktsn]

Well, it should be available since vuex-class would just bind properties by using mapXXX helper under the hood. That means when the vue instance is available, you can use them. Could you provide a reproduction in that case?

[steven-prybylynskyi]

Perhaps it shouldn't to :)

In the VueRouter docs it is stated that:

  beforeRouteEnter (to, from, next) {
    // does NOT have access to `this` component instance,
  },

[ktsn]

vuex-class (vue-class-component) does not tweak the hook behaviour. That means, if the original hook does not have this value, you cannot use it in class component too. You should import your store instance in that case.