Nuxt.js环境下服务端Vuex模块数据与客户端同步问题

问题根因 #

你遇到的两个核心问题本质都和Nuxt的Vuex运行约定、vuex-module-decorators动态模块的注册逻辑有关：

1. Nuxt默认会把服务端渲染完成后的Vuex状态序列化注入到客户端HTML的window.__NUXT__变量中，客户端初始化store时会自动用这个状态初始化。但你直接在装饰器中全局开启preserveState，服务端运行时没有预存的状态可以保留，会导致模块state变为undefined，触发属性读取报错。
2. 你直接导出固定Store实例的写法不符合Nuxt约定，Nuxt要求store/index.ts默认导出创建store的工厂函数，避免服务端多请求复用同一个实例导致状态污染，这也是nuxtServerInit不触发的根本原因。

解决方案 #

第一步：修正Store初始化方式匹配Nuxt约定 #

修改store/index.ts，默认导出store工厂函数，这样nuxtServerInit可以正常触发，也符合服务端渲染的安全要求：

// store/index.ts
import Vue from "vue";
import Vuex, { Store } from "vuex";

Vue.use(Vuex);

// Nuxt会自动调用该工厂函数创建服务端、客户端的独立store实例
export default () => new Vuex.Store<unknown>({
  actions: {
    nuxtServerInit(_, context) {
      // 此处可以编写全局服务端初始化逻辑
    }
  }
});

第二步：按环境动态设置preserveState参数 #

preserveState仅需要在客户端注册模块时开启，服务端注册时不需要开启。调整AuthenticationService模块的实例获取逻辑：

import { get } from 'lodash-es' // 也可以自己实现属性读取逻辑

@VuexModuleConfiguration({
  name: "AuthenticationService",
  namespaced: true,
  stateFactory: true,
  dynamic: true
})
export default class AuthenticationService extends VuexModule {
  private static instance: AuthenticationService | null = null

  public static getInstance(): AuthenticationService {
    if (!AuthenticationService.instance) {
      // 从当前Nuxt实例获取store，nuxt2也可以通过context.app.store获取
      const store = useStore()
      // 仅客户端有服务端注入的预存状态时开启preserveState
      const preserveState = process.client && !!get(window, '__NUXT__.state.AuthenticationService')
      
      AuthenticationService.instance = getVuexModule(AuthenticationService, {
        store,
        preserveState
      })
    }
    return AuthenticationService.instance
  }

  // 原有业务逻辑保持不变
}

注意不要把store参数写在@VuexModuleConfiguration装饰器中，而是在获取模块实例时动态传入，灵活控制preserveState参数适配不同运行环境。

可选：实现选择性Store状态同步 #

如果不需要同步全量Store状态，可以通过Nuxt钩子过滤序列化到客户端的状态：

// nuxt.config.js
export default {
  hooks: {
    'render:route'(url, result, context) {
      // 仅保留AuthenticationService模块的状态同步到客户端
      context.store.state = {
        AuthenticationService: context.store.state.AuthenticationService
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD