Nuxt：如何不使用localStorage在rollbar.js中访问store获取用户ID

报错根因 #

你调用getUserId()的时候没有传入context参数，导致函数内部读取context.store时context为undefined。此外Rollbar的transformer是由Rollbar内部触发执行的，不会主动传入Nuxt的上下文对象，你导出的getUserId仅在插件初始化阶段能拿到context，后续transformer执行时已经失去了context引用。

解决方案 #

利用Nuxt插件的闭包特性，在插件初始化时直接持有store引用，定义transformer时直接调用即可，无需额外导出参数传递：

1. 修改rollbar插件代码 #

// plugins/rollbar.js
import Rollbar from 'rollbar'

export default (context, inject) => {
  // 你的Rollbar基础配置
  const rollbarConfig = {
    accessToken: '你的Rollbar项目密钥',
    environment: process.env.NODE_ENV,
    // 其他原有配置保持不变
    transform: (payload) => {
      // 直接通过闭包读取当前上下文的store，无需额外传参
      payload.user_id = context.store.state.userId ?? null
    }
  }

  const rollbar = new Rollbar(rollbarConfig)
  // 挂载到Nuxt实例，组件内可通过this.$rollbar调用
  inject('rollbar', rollbar)
}

2. 注册插件到Nuxt配置 #

// nuxt.config.js
export default {
  plugins: [
    // 仅客户端上报就加mode: client，需要服务端上报可删除该配置
    { src: '~/plugins/rollbar.js', mode: 'client' }
  ]
}

实现说明 #

Nuxt插件执行时会自动注入完整的上下文对象，transformer定义在插件函数内部时，会通过闭包永久持有上下文的引用，不管后续什么时候触发transformer，都可以直接读取到最新的store状态，不需要借助localStorage存储，完全符合你的需求。

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