2

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.

1 Answer 1

2

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...

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.