I am facing a challenge with my Vue app where the normal reactive store is not working correctly and does not retain the values I have set. Hence, I would like to switch to a Pinia store. After installing Pinia, my main.js file looks like this:
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 set up a store within a 'stores' folder. Here is a snippet of that store:
import { defineStore } from "pinia";
export const useSomeAppStore = defineStore("someapp", () => {
const userID = ref(0);
const loggedIn = ref(false);
});
I want to utilize this store on the log in page to store the user id. Here's what the script setup looks like:
<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>
Upon refreshing the login page, an error pops up 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.
I am unsure why this error is occurring and what mistake I might be making. Additionally, I have noticed that some people include (axios) in the main.js file even though it is causing issues for me.
Another issue I am facing now is that while Pinia seems to be functioning and displays the user id when logged in, the data is lost upon refresh and the user id reverts to 0. Why isn't the store maintaining my data?