[SOLVED] Access Vuex store in router.js

maxxiris

I want to access Vuex store in router.js (not index.js of route where we could use export default function ({ store }) )

Here is the code I want to access store

path: '/list',
    component: () => import('layouts/my-layout.vue'),
    beforeEnter: (to, from, next) => {
      // Access store here
      next()
    },

I try
import { store } from 'Vuex'; and import store from '../store/index.js' but none work

So could anyone help me. Tks alot

metalsadman

@maxxiris expose an instance of your vuex store. like so

// store/index.js

const Store = new Vuex.Store({...})

export default function (...) {
  ...
  return Store
}

export { Store }

// router/route.js
import { Store } from '../store/index.js

maxxiris

Tks for your quick reply, It work. I make typo with import {store} (lower case and It doesnot work before)

Here is my store index.js

https://gist.github.com/linhtranvu/ea0f30cafbce67a69e761e0ace21ba63

DarkLite1

@metalsadman I was trying to have the same functionality in the /src/router/routes.js. To use some data stored within the Vuex store. In your suggested solution you export the Store in the /src/store/index.js file. However, currently it says “If not building with SSR mode, you can directly export the Store instantiation;” like so:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Store instance.
 */

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      tickets: require('./tickets').default,
      navigation: require('./navigation').default
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEV
  })

  if (process.env.DEV && module.hot) {
    module.hot.accept(['./tickets', './navigation'], () => {
      Store.hotUpdate({
        modules: {
          tickets: require('./tickets').default,
          navigation: require('./navigation').default
        }
      })
    })
  }

  return Store
}

If we would apply your suggestion will there be an impact on SSR mode later on? Because we might decicde at some point during development to go from an SPA to an SSR app.

Thank you for clarifying as this concerns me a bit and I don’t want to loose flexibility.

metalsadman

@DarkLite1 you can’t/shouldn’t use a singleton in SSR afaik, so my suggestion isn’t applicable in this mode.

DarkLite1

Thanks for getting back to me. If you ever find a workaround it would be nice if you could share it.

Zol

@DarkLite1

index.js

// ...
import makeRoutes from './routes'

// ...
export default function ({ store /* ,ssrContext */ }) {
  const routes = makeRoutes(store)

  return new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,
    // ...
  })
}

routes.js

const makeRoutes = (store) => {
  const routes = [
    {
      path: '/',
      beforeEnter: (to, from, next) => {
        if (!store.state.auth.token) {
          next({ path: '/login' })
        } else {
          next()
        }
      },
      component: () => import('layouts/MainLayout.vue'),
      children: [
        { path: '', component: () => import('pages/Index.vue') },
        { path: 'about', component: () => import('pages/About.vue') }
      ]
    }
  ]

  // Always leave this as last one
  if (process.env.MODE !== 'ssr') {
    routes.push({
      path: '*',
      component: () => import('pages/Error404.vue')
    })
  }

  return routes
}

export default makeRoutes

psierak

This post is deleted!

psierak

@Zol I was having difficulty getting the store into the routes.js and thank you very much! Works for me.