Help with Vuex access from routes



  • Hi folks, so first thing, what an amazing framework. I’m really enjoying learning about it. I have very little experience with node/javascript, so apologies on some of the questions here. But as I go through tutorials on the internet, I noticed that the structure of plain vue projects differ from quasar.
    So I’m following this tutorial: https://www.digitalocean.com/community/tutorials/handling-authentication-in-vue-using-vuex And I got stuck on how to import my store module into the routes/index.js

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    import routes from './routes'
    import store from '../store'
    
    Vue.use(VueRouter)
    
    /*
     * If not building with SSR mode, you can
     * directly export the Router instantiation;
     *
     * The function below can be async too; either use
     * async/await or return a Promise which resolves
     * with the Router instance.
     */
    
    export default function (/* { store, ssrContext } */) {
      const Router = new VueRouter({
        scrollBehavior: () => ({ x: 0, y: 0 }),
        routes,
    
        // Leave these as they are and change in quasar.conf.js instead!
        // quasar.conf.js -> build -> vueRouterMode
        // quasar.conf.js -> build -> publicPath
        mode: process.env.VUE_ROUTER_MODE,
        base: process.env.VUE_ROUTER_BASE
      })
      Router.beforeEach((to, from, next) => {
        if (to.matched.some(record => record.meta.requiresAuth)) {
          if (store.state.auth.getters.isLoggedIn) {
            next()
            return
          }
          next("/login")
        } else {
          next()
        }
      })
      return Router
    }
    
    
    

    So I figured this is where I should configure my beforeEach for the router, that works, but I can’t access the store getters

    export function someGetter (state) {
    }
    */
    
    export function isLoggedIn (state) {
        !!state.token
    }
    export function authStatus (state) {
        state.status
    }
    

    I tried to import them on routes/index.js via import store from '../store/ but that returns undefined. How can I access the store object here?

    Also, again apologies for my lack of knowledge on ES6, why is this.$store available on pages?

    Thank you



  • Ok, right after posting I noticed that store is passed as a context and its commented out, but still using store.auth.getters.isLoggedIn returns undefined. Somehow store.state.auth.status for instance works (have no idea how) but store.getters.auth does not work. If anyone could chime in please 🙂



  • @vinnyc if you are using a module youchange your syntax on getter store.getters['auth/isLoggedin'].



  • Thank you @metalsadman that did the trick. Awesome!


Log in to reply