InertiaJS+Vue+AdonisJS项目中Pinia无法初始化问题求助

针对你遇到的getActivePinia() was called but there was no active Pinia错误，提供以下几个可行的解决思路：

1. 修正变量名并调整插件安装顺序 #

你的代码中存在Pinia实例变量名拼写错误（pina应为pinia），同时插件安装顺序可能导致关联失败，修改后的app.js如下：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { createPinia } from "pinia";
// 修正变量名拼写
const pinia = createPinia()
import DefaultLayout from './Layouts/DefaultLayout.vue'

createInertiaApp({
  resolve: (name) => {
    const page = require(`./Pages/${name}`).default
    if (!page.layout) {
      page.layout = DefaultLayout
    }
    return page
  },
  setup({ el, App, props, plugin }) {
    // 先安装Inertia插件，再安装Pinia
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(pinia)
      .mount(el)
  },
})

2. 延迟在组件中调用Store #

如果组件顶层代码执行时Pinia尚未完成安装，可通过Vue的生命周期钩子延迟调用Store来验证：

<script lang="ts" setup>
import { useCounterStore } from '../Stores/counter'
import { onMounted } from 'vue'

onMounted(() => {
  const store = useCounterStore()
  console.log(store)
})
</script>

<template>
<div>oi</div>
</template>

若此方法生效，说明原问题是组件初始化时机早于Pinia安装完成的时机，后续可根据项目需求调整初始化逻辑。

3. 强制Store关联Pinia实例 #

通过显式将Pinia实例传递给Store定义，确保关联关系：

• 首先在app.js中导出Pinia实例：

export const pinia = createPinia()

• 然后修改counter.ts：

import { defineStore } from 'pinia'
import { pinia } from '../app'

// 显式传入Pinia实例
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Eduardo' }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})(pinia)

4. 检查依赖版本兼容性 #

确保你的依赖版本相互兼容：

• Vue需为3.2.0及以上版本（Pinia的最低要求）
• @inertiajs/vue3和Pinia使用最新稳定版
  可通过以下命令查看当前版本：

npm list vue @inertiajs/vue3 pinia

若版本不匹配，执行升级命令：

npm update vue @inertiajs/vue3 pinia

内容的提问来源于stack exchange，提问作者marcelo.delta