Issue with Pinia stores persistence in production
Hello
I'm having an issue with store persistence in production enviroment using pinia-plugin-persistedstate. I have 'persist' option as localStorage but when i reload the page everything is reset. This doesn't happen in development enviroment. I tried changing 'persist' to sessionStorage but that didn't do anything.
I'm hosting (shared hosting) a Laravel 10 + Vue 3 app. I don't have the Vue code in a different code base, I have it inside resources/js within the Laravel project folder.
Relevant files:
resources/js/app.js
import { createApp, markRaw } from 'vue';
import App from './App.vue';
import router from './routes';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import './bootstrap';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate)
pinia.use(({ store }) => {
store.router = markRaw(router);
});
const app = createApp(App);
app.use(router);
app.use(pinia);
app.config.globalProperties.$storage = window.location.protocol + '//' + window.location.host + '/storage/';
app.mount('#app');
resources/js/bootstrap.js
import axios from 'axios';
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.withCredentials = true;
axios.defaults.baseURL = "http://example.com";
resources/js/routes.js
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach((to, from, next) => {
const authStore = useAuthStore();
let isAuthenticated = authStore.user;
console.log(isAuthenticated);
// check route meta if it requires auth or not
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!isAuthenticated) {
return next({
name: 'login'
});
}
}
if (isAuthenticated && (to.name == 'login' || to.name == 'register')) {
return next({
name: 'dashboard'
});
}
if (to.name == 'base') {
if (isAuthenticated) {
return next({
name: 'dashboard'
});
} else {
return next({
name: 'login'
});
}
}
return next();
});
export default router;
This is my first time hosting a Laravel + Vue application so I'm not sure which information i should provide, so if you need more info please do tell.
Please or to participate in this conversation.