Vue3 Vuex Vue-route状态好像是undefiend

Question

我过去创建了一个小型 vue 应用程序，没有任何路由或存储。
我什至不会描述“后端”。

现在我的任务是创建一个更大的应用程序。所以我想使用 vue router 和 vuex。以及 Codeigniter 4 REST api。
我的问题是访问 vuex 商店..我试图使用

router.beforeEach()

检查用户是否已经从 API 收到其不记名令牌，表明用户已经登录..

但是当我尝试访问

const token = this.$store.getters.bearer_token;

时，我收到以下错误：

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;

在路由器中：

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

并在行中：

const token = this.$store.getters.bearer_token;

我收到提到的错误..

Answer 1

我认为我在这里的回答可能会有所帮助，请让我知道任何后续问题。

如何在vuejs上保存重启页面登录的状态