在啟動 vue devtools 之前，Vue3 Pinia 商店不會加載

Question

我在 Vue3 應用程序中遇到了 pinia 的奇怪行為。 我使用選項 API 創建了一個帶有 pinia 商店的小應用程序。

這是我創建商店的 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");

這是我的商店：

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),
  },

當我啟動 web 頁面時，我無法從商店獲取數據，即使重新加載也是如此。 商店未加載。

當我在 chrome 中打開 devTools 時，它沒有顯示商店已加載。

當我單擊 vueDevTools 時，商店加載並且數據出現在 web 頁面中。 我在控制台中收到消息：

““asperges”商店安裝“

這就像啟動 vueDevTools 觸發商店。 之后一切正常。

如果您知道我做錯了什么，我們將不勝感激。

Answer 1

好的，我找到了解決方案。 我不知道它是否正確，但它有效。 我只是嘗試從 mounted() 掛鈎中的組件調用商店，現在商店加載正確。

但是無論如何，我不知道為什么即使在組件中使用了數據，商店也沒有加載......