Nuxt3中如何在中间件里访问Vuex store？

一、先在Nuxt3中正确配置Vuex #

Nuxt3官方默认推荐Pinia，但仍可手动集成Vuex，步骤如下：

• 创建store/index.js文件，定义Vuex store实例：

import { createStore } from 'vuex'

export default createStore({
  state: () => ({
    user: null
  }),
  mutations: {
    SET_USER(state, payload) {
      state.user = payload
    }
  },
  actions: {
    login({ commit }, userData) {
      commit('SET_USER', userData)
    }
  },
  getters: {
    isLoggedIn: state => !!state.user
  }
})

• 创建plugins/vuex.js插件文件，将Vuex注册到Nuxt应用：

import { defineNuxtPlugin } from '#app'
import store from '../store'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(store)
  // 将store挂载到nuxtApp实例，方便全局调用
  nuxtApp.provide('store', store)
})

• 在nuxt.config.ts中注册该插件：

export default defineNuxtConfig({
  plugins: ['~/plugins/vuex.js']
})

二、在Nuxt3中间件中访问Vuex Store #

Nuxt3的中间件参数仅包含to和from，但你可以通过useNuxtApp()获取Nuxt应用实例，进而拿到Vuex store：

• 创建中间件文件（比如middleware/auth.js）：

export default defineNuxtRouteMiddleware((to, from) => {
  const nuxtApp = useNuxtApp()
  const store = nuxtApp.$store

  // 示例：访问state
  console.log(store.state.user)
  // 示例：调用mutation
  store.commit('SET_USER', { name: 'test' })
  // 示例：调用action
  store.dispatch('login', { name: 'test' })
  // 示例：访问getter
  const isLoggedIn = store.getters.isLoggedIn

  // 根据业务逻辑处理路由导航
  if (!isLoggedIn && to.path === '/dashboard') {
    return navigateTo('/login')
  }
})

总结 #

你不需要必须使用Pinia，只要按照上述步骤正确配置Vuex，就能在Nuxt3的中间件中正常访问store。若存在依赖冲突，可尝试排查Vuex与其他依赖的版本兼容性（需确保Vuex为4.x版本，适配Vue3），或清理node_modules和锁文件后重新安装依赖。

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