vuejs/vuex-router-sync

How to access `store` in beforeEnter

Ridermansb opened this issue · 11 comments

Ridermansb commented

How access store in beforeEnter ?

// main.js
import store from './store'
import router from './router'
import { sync } from 'vuex-router-sync'

sync(store, router)
// routes.js
function requireAuth (to, from, next) {
  if (!store.getters.isAuthenticated) { /// THIS NOT WORK, HOW TO ACCESS STORE?
    window.location.href = '/auth/v1/auth0/connect'
  } else {
    next()
  }
}

export default [
  {
    path: '/', component: Timeline
  },

  {
    path: '/events',
    component: Events,
    beforeEnter: requireAuth
  }
]
yyx990803 commented

Just import the store.

  • 👍20
Ridermansb commented

It will create a new store...

// My store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {},
  modules: {    ....    }
})

export default store

It recommended import again?

  • 👍1
LinusBorg commented

It will create a new store...

No it won't.

  • 👍15
  • 😄6
frankmichel commented

Is it possible to access store data in beforeEnter which is retrieved asynchronously in the store action?

This is especially important after a page reload, when some init data is being fetched and the router needs to wait for that data to either allow the user to access that page or not.

Is it possible for the router to "wait" for the data to be fetched?

LinusBorg commented

This is a closed ticket, and a usage/support question, and the issue tracker is reserved exclusively for bug reports and feature requests (as outlined in our Contributing Guide).

We encourage you to ask it on the forum , Stack Overflow or on gitter and are happy to help you out there.

frankmichel commented

Okay, okay ;) Just thought it might come in handy to ask it right here since other users will be directed here from Google with the same question... but I'll ask on SO :) Sorry, Linus!

Just for completion and future reference in case someone stumbles upon this question. I asked it here on SO: http://stackoverflow.com/questions/42579601/how-to-access-async-store-data-in-vue-router-for-usage-in-beforeenter-hook

  • 👍4
LinusBorg commented

No problem, it's just rules are rules and issues have to stay manageable ;)

  • 👍1
thesobercoder commented

How can I start some animation on the parent component from beforeRouteEnter? Right now this seems impossible.

LinusBorg commented

Please use forum.vuejs.org for questions.

jonathan-soifer commented

This is pure gold.

LinusBorg commented

Yeah but enough comedy for now. :)