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..

>Solution :

I think my answer here may assist, let me know any follow up Q’s.

How to save state logged in on restart page on vuejs

State in Vue will update and be lost: When a component is displayed again, a new instance will be created with only the initial state.

Therefore, save the data locally (session, local (I don’t think local is advised as has persistence on entire browswer), cookie etc)