CODEWITHSUNDEEP
vuejs3google-chrome-devtoolsstorepiniavue-devtools
elalitte
elalitte

Reputation: 124

Vue3 Pinia store not loading until vue devtools is launched

I encounter a strange behavior with pinia in a Vue3 app. I created a little app with a pinia store using option API.

Here is my main.js with creating the store :

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");

Here is my store :

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

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

And I call the store from my components :

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

When I start the web page, I can't get the datas from the store, even on a reload. The store is not loaded.

When I open the devTools in chrome, it doesn't show that the store is loaded.

When I click on the vueDevTools, the store loads and the datas appear in the web page. I get the message in the console :

"🍍 "asperges" store installed 🆕"

It's like starting the vueDevTools triggers the store. And all work fine after that.

If you have any idea of what I'm doing wrong, any help would be appreciated.

Upvotes: 2

Views: 4857

Answers (1)

elalitte
elalitte

Reputation: 124

Ok I found a solution. I don't know if it's the right one, but it works. I just tried to call the store from the component in the mounted() hook and now the store loads correctly.

But anyway, I don't know why the store didn't load even if the datas were used in the components...

Upvotes: 2

Related Questions