Store is no longer accessible in router.
-
@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() })
-
solved.
When implementing the beforeEach in a plugin, it worksexport default ({ router, store, Vue }) => { router.beforeEach((to, from, next) => { console.log('before each') debugger console.log(store.state.example.test) next() }) }
-
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. -
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) })```
-
@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 }
-
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 likethis.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…
-
@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.
-
@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.
-
This post is deleted! -
@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