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

    Help with Vuex access from routes

    Help
    2
    4
    292
    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.
    • V
      vinnyc last edited by

      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

      1 Reply Last reply Reply Quote 0
      • V
        vinnyc last edited by

        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 🙂

        metalsadman 1 Reply Last reply Reply Quote 0
        • metalsadman
          metalsadman @vinnyc last edited by

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

          1 Reply Last reply Reply Quote 0
          • V
            vinnyc last edited by

            Thank you @metalsadman that did the trick. Awesome!

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