Vue3 Vuex Vue-route state seems to be undefiend

August 22, 2023

EDIT: ChatGPT had a solution for me.
Apparently, the keyword "this" in the router refers only to the router itself and not the entire Vue app.
After I included the store in the router it worked.

See its awnser here: https://chat.openai.com/share/bfac1e16-b520-4725-92f7-5fc883af2598

ORIGINAL:

i’ve created a small vue app in the past without any routing nor stores.
And I wont even describe the "backend".

Now I was tasked to create an app that will be very much bigger. So i figured to use vue router and vuex. As well as a Codeigniter 4 REST api.
My problem is accessing the vuex store.. I was trying to use router.beforeEach() to check if the user has already recieved its bearer token from the API, suggesting the user is already logged in..

But when I try to access const token = this.$store.getters.bearer_token; I get the following error:

TypeError: undefined has no properties
    <anonymous> index.js:24
    guardToPromiseFn vue-router.mjs:2009

Main.js:

import "bootstrap/dist/css/bootstrap.css"

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
import router from './router'
import store from './store'

const axiosGuest = axios.create({
    baseURL: "https://api.example.de/user",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Requested-With": "XMLHttpRequest",
    },
});

const example = createApp(App);
example.config.globalProperties.$guest = axiosGuest; 
example.use(store);
example.use(router);
example.mount('#app');

import "bootstrap/dist/js/bootstrap.js"

./store/index.js:

import { createStore } from 'vuex'

const store = createStore({
  state: {
    isAuthenticated: false,
    bearer_token: null
  },
  mutations: {

  },
  getters: {
    isAuthenticated: state => {
      return state.isAuthenticated;
    },
    bearer_token: state => {
      return state.bearer_token;
    }
  }
});


export default store;

And here in the Router:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import LoginView from '../views/LoginView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

router.beforeEach((to, next) => {
  const token = this.$store.getters.bearer_token;
  if(token || to.name === 'login') {
    next();
  } else {
    next({name: 'login'})
  }
});

export default router

And in the line: const token = this.$store.getters.bearer_token; I get the mentioned error..