Larvel-mix + Pinia 抛出错误：在没有活动 Pinia 的情况下调用 getActivePinia

Question

我用来laravel-mix捆绑我的 Vue 3 和 Pinia 代码。我的app.js看起来像这样：

require('./bootstrap');

import { createApp } from 'vue'
import { createPinia } from "pinia";

const pinia = createPinia();
const app = createApp({});

app.use(pinia);
// ...
// ...
// ...
app.mount('#app');

我的 Vue 组件中的代码是基本的，与 Pinia 文档中的代码没有什么不同https://pinia.vuejs.org/introduction.html#basic-example

然而，即使laravel-mix成功编译并捆绑了所有内容，结果页面在浏览器控制台中显示此错误：

getActivePinia was called with no active Pinia. Did you forget to install pinia?
    const pinia = createPinia()
    app.use(pinia)
This will fail in production.

Answer 1

这对我有用 -setActivePinia(pinia)之后立即使用const pinia = createPinia();

import { createPinia, setActivePinia } from "pinia"
const pinia = createPinia();
setActivePinia(pinia);

因为您在 SSR 环境 (Laravel) 中使用 Pinia，所以设置 Pinia 的过程与文档中的过程有点不同

1. 创建一个文件\store\store.js作为 Pinia 的起点：

import { createPinia, setActivePinia } from "pinia";
const pinia = createPinia();
setActivePinia(pinia);
export default pinia;

2. 在 中app.js，导入pinia（从 导出\store\store.js）并配置您的应用程序以使用它：

require('./bootstrap');

import { createApp } from 'vue'
import pinia from './store/store' // importing Pinia
// import your components here

const app = createApp({});
app.use(pinia);
// ... use your components here
// ...
// ...
app.mount('#app');

3. Pinia-一切如常