Larvel+ 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

这对我起了作用--在const pinia = createPinia();之后使用const pinia = createPinia();

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

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

1. 创建一个文件\store\store.js，它将作为Pinia:

的起点。

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

1. In 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');

1. Pinia-business如常