Vue3中Pinia商店无法加载，仅打开Vue DevTools后才触发加载

问题现象 #

启动网页后无法获取商店数据，刷新页面也无效，Chrome开发者工具中看不到已加载的商店。但点击Vue DevTools后，商店会立即加载，页面显示数据，控制台出现提示：🍍 "asperges" store installed 🆕，之后一切运行正常。

相关代码 #

main.js #

import { createApp } from "vue";
import { createPinia } from "pinia";
// Vue Router
import index from "./router";

// import { useAspergesStore } from "./store/storeAsperges";
import App from "~/App.vue";

import "~/styles/tailwind.css";
import "~/styles/main.scss";

const app = createApp(App);
const pinia = createPinia();
app.use(pinia);

app.use(index);

app.mount("#app");

商店代码（storeAsperges.js） #

import { defineStore } from 'pinia'
import axios from "axios";

export const useAspergesStore = defineStore('asperges', {
  state: () => ({
    listeCueilleurs: JSON.parse(localStorage.getItem("listeCueilleurs")) || [],
  }),
  getters: {
    ...
  },
  actions: {
    ...
  },
})

组件调用商店代码 #

import { useAspergesStore } from '../../../store/storeAsperges.js';
import { mapStores } from 'pinia';
...
  computed: {
    ...mapStores(useAspergesStore),
  },

原因与解决方法 #

这是Pinia的延迟加载机制导致的：商店只有在被首次调用（比如执行useStore()函数）时才会完成初始化。你当前用mapStores只是在computed中映射了商店，但没有实际触发商店实例化——Vue DevTools打开时会主动遍历并初始化所有已定义的商店，因此触发了加载。

可以通过以下三种方式解决：

1. 组件内主动初始化商店
   在组件的created钩子中主动调用一次商店函数，强制触发初始化：

   import { useAspergesStore } from '../../../store/storeAsperges.js';
   import { mapStores } from 'pinia';
   ...
   created() {
     // 主动触发商店初始化
     useAspergesStore();
   },
   computed: {
     ...mapStores(useAspergesStore),
   },
   

2. 在main.js中提前初始化
   取消main.js中注释的导入代码，在Pinia挂载后主动初始化商店：

   import { createApp } from "vue";
   import { createPinia } from "pinia";
   import index from "./router";
   // 导入商店
   import { useAspergesStore } from "./store/storeAsperges";
   import App from "~/App.vue";
   
   import "~/styles/tailwind.css";
   import "~/styles/main.scss";
   
   const app = createApp(App);
   const pinia = createPinia();
   app.use(pinia);
   
   // 初始化商店
   useAspergesStore(pinia);
   
   app.use(index);
   app.mount("#app");
   

3. 使用mapState/mapGetters替代mapStores
   若仅需访问商店的state或getters，直接使用mapState或mapGetters，它们会在组件渲染时自动触发商店初始化：

   import { useAspergesStore } from '../../../store/storeAsperges.js';
   import { mapState } from 'pinia';
   ...
   computed: {
     ...mapState(useAspergesStore, ['listeCueilleurs']),
   },
   

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