我有一家vuex商店：

存储.js

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

我试图保护除auth路由（/signin和/signup）之外的所有路由，因此我需要从组件外部访问vuex存储（在beforeEach路由器方法中），在上搜索，因此我发现这应该可以工作：

路由器.js：

import store from '@/store.js' 

const routes = {
  // routes defined here...
}

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()
})

然而，getter的日志返回undefined，因此email的日志也返回undefined，另一端的整个存储的日志返回一堆属性，其中有_state，事实上它确实有email和username属性，正如我所期望的那样。

更新：以下是codesandbox中的最小可重现示例：

所以我真的很困惑，我错过了什么？
PD：我正在使用Vue 3和选项API