No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    [SOLVED] Access Vuex store in router.js

    Framework
    6
    10
    8970
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      maxxiris last edited by 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

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by 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
        
        1 Reply Last reply Reply Quote 1
        • M
          maxxiris last edited by 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

          1 Reply Last reply Reply Quote 0
          • DarkLite1
            DarkLite1 last edited by 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 1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman @DarkLite1 last edited by metalsadman

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

              1 Reply Last reply Reply Quote 0
              • DarkLite1
                DarkLite1 last edited by

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

                Z 1 Reply Last reply Reply Quote 0
                • Z
                  Zol @DarkLite1 last edited by

                  @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
                  
                  P 1 Reply Last reply Reply Quote 3
                  • P
                    psierak last edited by

                    This post is deleted!
                    1 Reply Last reply Reply Quote 0
                    • P
                      psierak @Zol last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • W
                        whoacowboy last edited by

                        @Zol This was extremely helpful. Thank you!

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post