Vue3 Pinia报错：初始化前无法访问useUserStore问题求助

错误原因分析 #

1. Store配置文件错误：你把Pinia封装成了自定义插件，还在install函数里提前调用useUserStore，此时Pinia的上下文还没完全初始化，直接调用会导致报错。
2. 组件映射方式错误：选项式API中，直接在computed里用mapState(useUserStore, [...])会在组件初始化时立即执行useUserStore，但此时Pinia还没挂载到组件实例上，无法获取上下文。

解决方案 #

第一步：修正Store配置文件（stores/index.js） #

删除自定义插件封装逻辑，直接导出Pinia实例：

import { createPinia } from "pinia"
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const piniaStore = createPinia()
piniaStore.use(piniaPluginPersistedstate)

export default piniaStore

注：不需要提前实例化useUserStore或useGameStore，组件使用时再调用即可。

第二步：修正组件中的映射方式 #

以下三种方法任选其一：

方法1：用setup函数配合mapState（选项式API）

<template>
  <!-- ... -->
</template>

<script>
import { mapState } from "pinia"
import { useUserStore } from "../../stores/UserStore.js"
import LoginForm from "../../components/forms/LoginForm.vue"

export default {
  name: "Login",
  components: { LoginForm },
  setup() {
    const userStore = useUserStore()
    // 映射getter到计算属性
    const mapped = mapState(userStore, ["user", "isAuthenticated"])
    return {
      ...mapped
    }
  }
}
</script>

方法2：直接在computed中调用useUserStore（选项式API）

<template>
  <!-- ... -->
</template>

<script>
import { useUserStore } from "../../stores/UserStore.js"
import LoginForm from "../../components/forms/LoginForm.vue"

export default {
  name: "Login",
  components: { LoginForm },
  computed: {
    user() {
      return useUserStore().user
    },
    isAuthenticated() {
      return useUserStore().isAuthenticated
    }
  }
}
</script>

方法3：使用