Nuxt中Pinia跨Store调用变量返回Undefined问题求助

问题根源 #

1. SSR初始化冲突：Nuxt服务端渲染时，process.client为false，userStore直接返回空值，此时blogStore初始化读取userStore.userInfo会得到undefined，且后续客户端hydrate时不会自动更新。
2. 状态非响应式：userStore中的userInfo等变量未用ref/reactive包裹，Pinia无法跟踪其变化，导致blogStore无法感知客户端后续的令牌解析结果。
3. 静态赋值时机错误：blogStore在初始化时直接静态读取user_id，此时userStore可能还未完成客户端的localStorage读取和JWT解析。

修复代码 #

1. 修正userStore（确保响应式与SSR兼容） #

import { defineStore } from 'pinia'
import { ref } from 'vue'
import jwtDecode from "jwt-decode";

export const useUserStore = defineStore('User', () => {
  // 初始化响应式状态，服务端默认值避免undefined
  const isAuthenticated = ref(false)
  const token = ref(null)
  const userInfo = ref(null)

  // 仅在客户端执行本地存储读取与令牌解析
  if (process.client) {
    const storedAuth = localStorage.getItem("isAuthenticated")
    isAuthenticated.value = storedAuth ? JSON.parse(storedAuth) : false
    
    const storedToken = localStorage.getItem("token")
    token.value = storedToken ? JSON.parse(storedToken) : null
    
    if (token.value) {
      userInfo.value = jwtDecode(token.value.access)
    }
  }

  return { userInfo, token, isAuthenticated }
})

2. 修正blogStore（响应式获取+动态赋值） #

import { defineStore } from 'pinia'
import { reactive, computed } from 'vue'
import { useUserStore } from '@/store/user'

export const useBlogStore = defineStore('Blog', () => {
  const server = "http://127.0.0.1:8000/"
  const userStore = useUserStore()

  // 用computed响应式跟踪userID变化
  const userID = computed(() => userStore.userInfo?.user_id)

  const blog = reactive({
    title: 'first blog',
    body: 'some random text'
  }) 

  const createBlog = async () => {
    // 发送请求时动态获取最新userID，避免初始化时的undefined
    if (!userID.value) {
      // 可选：添加未登录提示逻辑
      return
    }
    
    const sendData = await fetch(`${server}/api/create-blog/`, {
      method: 'POST',
      headers: {
        "Content-Type": 'application/json'
      },
      body: JSON.stringify({
        ...blog,
        user: userID.value
      })
    })
    const res = await sendData.json()
    // 可选：处理响应结果
  }

  return { blog, createBlog, userID }
})

关键修复点说明 #

• 响应式状态：将userStore中的状态改为ref，让Pinia能跟踪其变化，确保blogStore能实时获取最新值。
• SSR兼容：服务端初始化默认值，仅在客户端读取localStorage，避免服务端渲染时的空值问题。
• 动态获取userID：用computed响应式获取userID，在请求时动态赋值，确保发送的是最新的用户ID。

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