如何在Nuxt store模块action处理器外部访问store上下文

在Nuxt store模块的默认action处理器外部访问commit方法的实现方式
对应文件路径：store/user.js
原始问题代码：

export const state = () => ({
  user: null,
  authIsReady: false
})

export const mutations = {
  SET_USER(state, user) {
    state.user = user
  },
  SET_AUTH_READY(state, payload) {
    state.authIsReady = payload
  }
}

const unsub = onAuthStateChanged(auth, (user) => {
  // 此处调用commit会报undefined，如何正确访问commit？
  commit('SET_AUTH_READY', true)
  commit('SET_USER', user)
  unsub()
})

说明：onAuthStateChanged是Firebase提供的鉴权状态监听函数。

commit是Vuex store实例提供的方法，无法在store模块的顶层作用域直接访问，两种可落地的实现方案：

方案1：客户端插件内初始化监听（推荐） #

Firebase鉴权监听属于应用启动阶段的全局逻辑，放在Nuxt客户端插件里执行最合理，插件上下文可以直接拿到全局store实例：

• 新建插件文件plugins/firebase-auth.client.js，.client后缀保证逻辑只在浏览器端运行，避免SSR阶段报错
• 写入以下插件代码，Nuxt会自动加载该插件，不需要额外手动注册：

import { onAuthStateChanged, getAuth } from 'firebase/auth'

export default defineNuxtPlugin(({ $store }) => {
  const auth = getAuth()
  const unsub = onAuthStateChanged(auth, (user) => {
    // 带模块命名空间调用commit
    $store.commit('user/SET_AUTH_READY', true)
    $store.commit('user/SET_USER', user)
    unsub()
  })
})

方案2：封装初始化Action #

如果不想新增插件，可以把监听逻辑封装到store的action中，action内部可以直接通过上下文拿到commit：

• 修改store/user.js代码，新增对应的action：

export const state = () => ({
  user: null,
  authIsReady: false
})

export const mutations = {
  SET_USER(state, user) {
    state.user = user
  },
  SET_AUTH_READY(state, payload) {
    state.authIsReady = payload
  }
}

export const actions = {
  initAuthState() {
    const unsub = onAuthStateChanged(auth, (user) => {
      this.commit('SET_AUTH_READY', true)
      this.commit('SET_USER', user)
      unsub()
    })
  }
}

• 在应用入口（比如app.vue）客户端挂载后触发该action即可：

<script setup>
const store = useStore()
onMounted(() => {
  store.dispatch('user/initAuthState')
})
</script>

注意：不要在store模块顶层直接写副作用逻辑（比如这里的Firebase监听），顶层代码会在构建、SSR阶段提前执行，不仅拿不到store实例，还可能引发内存泄漏、跨请求状态污染的问题。

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