CODEWITHSUNDEEP
javascriptvue.js
Bitwise
Bitwise

Reputation: 8451

Access vuex store in before Vue instance is initialized

I'd like to check if the user is validated before entering routes. I'm using vue-router's beforeEach to tackle this. But I realize that I can check the vuex store before the vue instance is initialized.

Main.js

import Vue from "vue";
import Vuetify from 'vuetify';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import VeeValidate from 'vee-validate';
import store from '../store/store.js';
import App from '../app.vue';
import axios from 'axios';
import progressBar from '../plugins/progress-bar';
import { routes } from '../router-config';
import { sync } from 'vuex-router-sync';

import 'vuetify/dist/vuetify.min.css'

Vue.use(VeeValidate)
Vue.use(VueRouter)
Vue.use(Vuetify)
Vue.use(Vuex)

Vue.config.productionTip = false

axios.defaults.headers.common['Accept'] = 'application/json'

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('app'))
  const router = new VueRouter({
    routes,
    mode: 'hash',
    saveScrollPosition: true,
  });

  sync(store, router)

  router.beforeEach((to, from, next) => {
    debugger;
    if (to.meta.requiresAuth && store.getters.isLoggedIn) {
      next({ path: '/' })
    } else if (to.path === "/") {
      next({ path: '/dashboard'})
    } else {
      next()
    }
  });

  const app = new Vue({
    el: 'app',
    router,
    store,
    axios,
    render: h => h(App),
    template: '<App/>',
    components: {
      App,
    }
  });
})

How can I access this so that I can do something like this this.$store.getters.isLoggedIn? Am I thinking of this the right way?

Upvotes: 1

Views: 2423

Answers (1)

Bert
Bert

Reputation: 82469

You don't need this.$store. You have store. Just use store.

store.getters.isLoggedIn

this.$store is just a reference to store that you can use inside Vue components. But anywhere you import the store you have access to everything you need.

Upvotes: 2

Related Questions