如何以SSR友好的方式在Vue组件外访问Vuex、Vue-router、Pinia等？

核心原则：拒绝全局有状态单例 #

SSR场景下，全局单例会导致不同请求之间共享状态，引发跨请求污染。所有需要在组件外使用的实例（Vuex、Vue-router、Vue-i18n、Pinia及自研模块），都需要每次请求生成独立实例。

推荐解决方案：工厂函数+请求上下文传递 #

1. Vue生态模块改造为工厂函数 #

将原本直接导出单例的代码，改为导出创建实例的工厂函数，每次请求调用函数生成新实例：

Vuex示例

// store.js
import Vuex from 'vuex'

export function createStore() {
  return new Vuex.Store({
    state: () => ({ /* 初始状态 */ }),
    mutations: { /* ... */ },
    actions: { /* ... */ }
  })
}

Vue-router示例

// router.js
import VueRouter from 'vue-router'
import routes from './routes'

export function createRouter() {
  return new VueRouter({
    mode: 'history',
    routes
  })
}

Vue-i18n示例

// i18n.js
import VueI18n from 'vue-i18n'
import messages from './locales'

export function createI18n() {
  return new VueI18n({
    locale: 'en',
    fallbackLocale: 'en',
    messages
  })
}

2. SSR服务端入口：实例化并绑定到请求上下文 #

在服务端处理每个请求时，调用工厂函数生成新实例，并挂载到请求上下文（或Vue实例）中，确保每个请求拥有独立的实例：

// server-entry.js
import { createApp } from 'vue'
import { createStore } from './store'
import { createRouter } from './router'
import { createI18n } from './i18n'
import App from './App.vue'

export async function render(req) {
  // 为当前请求创建独立实例
  const store = createStore()
  const router = createRouter()
  const i18n = createI18n()

  // 根据请求参数初始化状态
  await router.push(req.url)
  await router.isReady()

  const app = createApp(App)
  app.use(store).use(router).use(i18n)

  // 将实例挂载到请求上下文，供组件外模块使用
  req.appContext = {
    store,
    router,
    i18n,
    app
  }

  // 后续渲染逻辑...
}

3. 组件外模块的实例获取方式 #

在工具函数、API请求等组件外代码中，通过接收请求上下文参数来获取实例：

// api.js
export async function fetchUser(userId, { store }) {
  const user = await api.get(`/users/${userId}`)
  store.commit('SET_USER', user)
  return user
}

4. Pinia的适配方案 #

Pinia本身已做SSR优化，只需在服务端每次请求创建新的Pinia实例，并挂载到Vue app上：

// server-entry.js
import { createPinia } from 'pinia'

export async function render(req) {
  const pinia = createPinia()
  const app = createApp(App)
  app.use(pinia)

  // 将pinia实例绑定到请求上下文
  req.appContext.pinia = pinia

  // 组件外使用时，从上下文获取pinia并创建store
  const userStore = useUserStore(req.appContext.pinia)
}

5. 自研模块的改造思路 #

将自研的有状态模块也封装为工厂函数，每次请求生成新实例：

// customModule.js
export function createCustomModule(options) {
  return {
    state: { /* 独立状态 */ },
    methods: { /* 操作方法 */ }
  }
}

在服务端入口实例化后，同样挂载到请求上下文供外部调用。

不推荐的方案：清除模块缓存 #

通过清除Node.js模块缓存实现每次重新加载模块的方式，会破坏模块缓存机制，导致性能下降，且容易引发内存泄漏、模块重复加载等不可控问题，维护成本极高，不建议采用。

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