Adonuxt中vuex-persistedstate与nuxtClientInit执行顺序问题求助

我之前在Adonuxt项目里也碰到过一模一样的问题——nuxtClientInit触发时，vuex-persistedstate还没完成从localStorage恢复状态，导致拿不到auth数据没法设置Axios token。下面是几个经过验证的实用解决方案：

方案1：用Vue.nextTick延迟nuxtClientInit执行 #

vuex-persistedstate是同步恢复状态，但Nuxt客户端插件的执行时机和store状态恢复可能存在微小时序差，用nextTick等待DOM更新循环结束，就能确保状态已经完全恢复：

// store/actions.js
import Vue from 'vue'

export const actions = {
  async nuxtClientInit ({ state, $axios }) {
    // 等待下一个事件循环，确保persistedstate完成状态恢复
    await Vue.nextTick()
    
    if (state.auth?.jwt?.token) {
      $axios.setToken(state.auth.jwt.token, 'Bearer')
    }
  }
}

这个方案改动最小，适合不想调整现有代码结构的场景。

方案2：在vuex-persistedstate的rehydrate回调中设置token #

vuex-persistedstate自带rehydrated回调，它会在状态从localStorage恢复完成后立即触发，直接在这里处理Axios token配置是最准确的：

// store/index.js
import createPersistedState from 'vuex-persistedstate'

export default {
  plugins: process.client ? [
    createPersistedState({
      paths: ['auth'], // 指定要持久化的auth模块
      rehydrated(state) {
        // 这里的state已经是恢复后的完整状态
        if (state.auth?.jwt?.token) {
          // 通过window.$nuxt获取客户端的axios实例
          window.$nuxt.$axios.setToken(state.auth.jwt.token, 'Bearer')
        }
      }
    })
  ] : [],
  // ...其他store配置
}

注意要加上process.client判断，避免服务端渲染时出现报错。

方案3：订阅store状态变化，自动同步Axios token #

如果你的项目涉及登录/登出等动态更新auth状态的场景，这个方案更健壮——监听store的mutation事件，每当auth状态变化时自动同步token：

1. 创建客户端插件plugins/axios-auth.js：

export default ({ app, store }) => {
  // 初始化时先设置一次token
  if (store.state.auth?.jwt?.token) {
    app.$axios.setToken(store.state.auth.jwt.token, 'Bearer')
  }

  // 订阅store的mutation事件
  store.subscribe((mutation, state) => {
    // 假设更新auth状态的mutation名为`auth/SET_AUTH`
    if (mutation.type === 'auth/SET_AUTH') {
      if (state.auth?.jwt?.token) {
        app.$axios.setToken(state.auth.jwt.token, 'Bearer')
      } else {
        // 登出时清空token
        app.$axios.setToken(false)
      }
    }
  })
}

2. 在nuxt.config.js中配置该插件（确保仅客户端执行）：

export default {
  plugins: [
    { src: '~/plugins/localstorage.js', ssr: false },
    { src: '~/plugins/axios-auth.js', ssr: false }
  ]
}

这个方案不仅解决了初始化时的问题，还能自动处理后续的登录/登出操作，一劳永逸。

额外检查项 #

最后别忘了确认你的vuex-persistedstate配置是否正确：

• 仅在客户端加载插件（用process.client判断）
• 指定了正确的paths（比如['auth']），确保auth模块被持久化
• 没有自定义storage导致读取失败（默认localStorage无需额外配置）

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