Store is no longer accessible in router.

paul

@Hawkeye64 Thanks a lot for your support.

I created via the cli a brand new project which illustrates the problem in the most simple way.

https://github.com/paulvanbladel/quasar-demo

Basically, it happens here:

  Router.beforeEach((to, from, next) => {
    console.log('before each')
    console.log(store.state.example.test)
    next()
  })

paul

solved.
When implementing the beforeEach in a plugin, it works

export default ({ router, store, Vue }) => {
  router.beforeEach((to, from, next) => {
    console.log('before each')
    debugger
    console.log(store.state.example.test)
    next()
  })
}

metalsadman

you could’ve just un-commented the line.
export default function (/* { store, ssrContext } */) {
to
export default function ({ store }) {
also comment the line
import store from '../store'
since like doing it with quasar plugins, the store is also accessible in router/index.js.

jacklin10

I couldn’t get this to work by using the getters either.

// router/index.js
import store from '../store/auth'

  Router.beforeEach((to, from, next) => {
      // works
      console.log('loggedIn: ', store.state.loggedIn)
      // flailing failed attempts while hammering the keyboard and looking to the sky for answers
      console.log('LoggedIn: ', store.getters['auth/loggedIn'])
      console.log('LoggedIn: ', store.getters.loggedIn)
      console.log('LoggedIn: ', store.loggedIn)
  })```

metalsadman

@jacklin10 be sure that you passed the store as an arg at your router/index.js’s export default function to access the store You don’t need to import your store.
Like I stated on my older reply in this thread https://forum.quasar-framework.org/topic/2825/store-is-no-longer-accessible-in-router/6… which is just above your post.
ie.

export default function({ store }) { // <<<<<<-- this is what you're looking for
  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })

  Router.beforeEach((to, from, next) => {
      ...
      console.log('LoggedIn: ', store.getters['auth/loggedIn'])
      ....
  })

  return Router
}

matzeso

Hey,
I am also having problems getting to the store from my routes. I want to use a guard only on specific parent routes and this guard needs access to the store. My router/index can have {store} in the export function part, but I need it within my guard, which is imported within my routes.js, which in turn is imported from router/index. So I don’t know how it would help me that I can inject the { store } in my router/index as I need it in other modules.

Since the store exports a function, I just called this function to receive it, but I am getting a lot of "don’t mutate the store directly’ messages, although none of my actions does anything to the state directly.

This is my guard:

import {actions} from '@store/auth/actions';
import getStore from '@store';

export const loggedInGuard = async (to, from, next) => {
    let store = getStore();
    if (store.getters.isLoggedIn) {
        return next();
    }

    try {
        await store.dispatch(actions.LOGIN);
    } catch(e) {

    }

    if (store.getters.isLoggedIn) {
        next();
    } else {
        next({name: 'login', query: {redirect: to.fullPath}});
    }
}

And this is my login action:

async [actions.LOGIN]({ dispatch, commit, state}) {
        let response = {};

        try {

            response = await axios({
                url: `${constants.API_URL}/user`,
                method: 'get',
            });

            if (response.payload && response.payload.data) {
                commit(mutations.SET_LOGGED_IN_USER, response.payload.data);
                return Promise.resolve(true);
            }


        } catch (e) {
         
        }

        return Promise.reject('User data could not be retrieved');
    }

The commit(mutations.SET_LOGGED_IN_USER, response.payload.data); does have 2 lines only, where I am just doing something like this.state.user = user and another similar line, and they both throw 2 errors, reading:

Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."
vue.runtime.esm.js?2b0e:1888 Error: [vuex] do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js?2f62:90)
    at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:774)
    at Watcher.run (vue.runtime.esm.js?2b0e:4562)
    at Watcher.update (vue.runtime.esm.js?2b0e:4536)
    at Dep.notify (vue.runtime.esm.js?2b0e:730)
    at Object.reactiveSetter [as user] (vue.runtime.esm.js?2b0e:1055)
    at Store.eval (mutations.js?a46e:17)
    at wrappedMutationHandler (vuex.esm.js?2f62:725)
    at commitIterator (vuex.esm.js?2f62:391)
    at Array.forEach (<anonymous>)

I would really appreciate some help I am trying to figure this out for hours now and I just don’t get why these errors come up…

metalsadman

@matzeso please make a separate topic next time, yours is not related to the original question. while this question has been probably asked multiple times here and somewhere else, like this one https://github.com/nuxt/nuxt.js/issues/1917.

vildar

@matzeso I came to this topc with the exact problem and my “solution” looked like yours, so I think it’s relevant here. I’ve now a solution which is somewhat a workaround but still playing by the rules. I use route meta fields in routes.js and markup any route that should have my auth guard with requiredAuth meta field.

const routes = [
  {
    path: '/home',
    component: () => import('layouts/BaseLayout.vue'),
    children: [
      { path: '',
        name: 'pagename',
        meta: { requireAuth: true },
        component: () => import('pages/HomePageName.vue') }
    ]
  }
]

In router/index.js I then I pass store as an argument in the export default function and implement a beforeEach that checks the meta field. So the guard that require access to the store and a getter, is moved into a beforeEach function. It’s not strictly the same but good enough for me.

export default function ({ store }) {
  const Router = new VueRouter({
  ...
  })

  Router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requireAuth)) {
      if (store.getters['auth/isSignedIn']) {
        next()
      } else {
        next({ name: 'account-signin', query: { next: to.fullPath } })
      }
    } else {
      next()
    }
  })

  return Router
}

So a little mix of previous replies by @metalsadman and others, with other parts of vue-router made it work for me.

alhidalgodev

This post is deleted!

alhidalgodev

@metalsadman said in Store is no longer accessible in router.:

you could’ve just un-commented the line.
export default function (/* { store, ssrContext } */) {
to
export default function ({ store }) {
also comment the line
import store from '../store'
since like doing it with quasar plugins, the store is also accessible in router/index.js.

Work perfect for me in quasar 1.4.0

No More Posting New Topics!

Store is no longer accessible in router.