Vue3组件外访问Vuex Store遇Getter未定义问题求助

我的Vuex Store配置 #

store.js

export default createStore({
  state () {
    return {
      username: 'test',
      email: 'test@test.com',
    }
  },
})

路由守卫实现代码 #

我需要保护除/signin和/signup外的所有路由，于是在路由的beforeEach钩子（组件外）中访问Vuex Store，代码如下：
router.js

import store from '@/store.js' 

const routes = {
  // 路由定义...
}

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach(function (to, _, next) {
  console.log('store', store);
  console.log('getters', store.getters);
  console.log('email', store.getters.email);

  if (!(to.path === '/signin' || to.path === '/signup')) {    
    store.getters.email ? next() : next('/signin')
  }
  next()
})

遇到的问题 #

日志显示store.getters返回undefined，store.getters.email也为undefined，但打印整个store实例时，能看到_state属性里包含正确的email和username值。我使用的是Vue3 + Options API，请问问题出在哪里？

1. 核心问题：未显式定义Getter #

你的Vuex Store仅声明了state，但没有配置getters选项。Vuex不会自动将state的属性映射到getters上，必须显式定义对应的getter，才能通过store.getters访问状态值。

2. 具体修复步骤 #

第一步：给Store添加Getter #

修改store.js，补充getters配置：

export default createStore({
  state () {
    return {
      username: 'test',
      email: 'test@test.com',
    }
  },
  getters: {
    email: state => state.email,
    username: state => state.username
  }
})

第二步：修复路由守卫逻辑漏洞 #

原代码中无论是否进入权限判断分支，最后都会执行next()，这会导致重复调用next引发跳转异常。调整后的逻辑：

router.beforeEach(function (to, _, next) {
  // 白名单路由直接放行
  if (to.path === '/signin' || to.path === '/signup') {
    return next()
  }
  // 非白名单路由验证登录状态
  store.getters.email ? next() : next('/signin')
})

临时备选方案（不推荐） #

如果不想定义getters，也可以直接访问store.state.email，但这种写法不符合Vuex的状态管理规范，不利于后续维护和扩展，仅适合临时测试：

if (!(to.path === '/signin' || to.path === '/signup')) {    
  store.state.email ? next() : next('/signin')
}

内容的提问来源于stack exchange，提问作者GhostOrder