CODEWITHSUNDEEP
javascriptvue.jsvuejs3pinia
crawlingdev
crawlingdev

Reputation: 268

Vue3 - Setting up Pinia gives me an error of no active Pinia

I have this Vue app I would like to convert the store to a Pinia store because the normal reactive store just doesn't work and does not keep the values I set.

So I installed pinia and I have the following main.js file:

import { createApp, h } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import { store } from "./store";
import axios from "axios";

axios.defaults.baseURL = "http://127.0.0.1:8000";
axios.defaults.xsrfHeaderName = "X-CSRFToken";
axios.defaults.xsrfCookieName = "csrftoken";

const pinia = createPinia();

const app = createApp(App).use(router, axios, store, pinia).mount("#app");

I have created a store inside a stores folder and here is that store:

import { defineStore } from "pinia";

export const useSomeAppStore = defineStore("someapp", () => {
    const userID = ref(0);
    const loggedIn = ref(false);
});

On the log in page I would like to use this store so I can save the user id in the store.

<script setup>
document.title = "Login | addapost";
import axios from "axios";
import { ref, watch, onBeforeMount, onMounted } from "vue";
import { useSomeAppStore } from "@/stores/someapp";
import { useRouter, useRoute } from "vue-router";

const store = useAddapostStore();

</script>

If I refresh the log in page I see the following error in the console:

Uncaught (in promise) Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
    const pinia = createPinia()
    app.use(pinia)
This will fail in production.

Why is this error happening and what am I doing wrong here please?

The problem is with axios I don't have to use(axios) in the main.js file. Wonder why some people add it to the main.js file and it works but for me it doesn't.

But now I have another problem. I got pinia working and it says the store is installed and I see the user id when I am logged in. As soon as I refresh the data is lost and the user id becomes 0. Why is the store not keeping my data?

Upvotes: 0

Views: 1065

Answers (1)

Raukaute
Raukaute

Reputation: 651

You can’t pass multiple plugins to a single app.use() method. Instead, you have to chain them - one plugin each:

app.use(…).use(…)

Upvotes: 1

Related Questions