Nuxt3迁移：使用defineNuxtRouteMiddleware如何访问VueX Store？

当然可行，Nuxt3中无论是使用官方推荐的Pinia还是兼容原有Vuex，都能在defineNuxtRouteMiddleware创建的路由中间件中访问Store状态，具体实现如下：

一、使用Pinia（Nuxt3官方推荐方案） #

如果已经迁移到Nuxt3官方推荐的Pinia状态管理，只需在中间件中调用你定义的Store函数即可：

// 假设你已定义名为useCommonStore的Pinia Store
export default defineNuxtRouteMiddleware((to, from) => {
  const commonStore = useCommonStore()
  const userName = commonStore.auth.user
})

对应的Pinia Store示例（一般放在stores/common.js）：

import { defineStore } from 'pinia'

export const useCommonStore = defineStore('common', {
  state: () => ({
    auth: {
      user: ''
    }
  })
})

二、使用Vuex（兼容Nuxt2的过渡方案） #

如果暂时保留Vuex，可通过useStore()钩子直接访问Store状态：

export default defineNuxtRouteMiddleware((to, from) => {
  const store = useStore()
  const userName = store.state.common.auth.user
})

注意：需确保已在Nuxt3项目中正确配置Vuex依赖（安装vuex@next并维持原有store目录结构）

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