New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[nuxt] Pinia State doesn't persist when set from middleware #221
Comments
maybe you're reading log from your terminal? when server render, console.log while print at terminal and there is no localstorage. may you can watch the console on chrome |
Doesn't it work with cookies? I thought it is SSR friendly and I can read persisted values from store in my middleware. |
when first run app and enter page, this route middleware will trigger immediately. store will be Initialized and |
you can try to run |
I'm changing the state of pinia module from the middleware which suppose to have access to nuxt instance. I thought that the change to pinia store which I made from the middleware would persist with your plugin. From middleware I execute function which change pinia store. Cookie is not created by |
maybe we can change the judgment method, like: function usePersistedstateSessionStorage() {
return ({
getItem: (key) => {
return checkWindowsKey('sessionStorage')
? sessionStorage.getItem(key)
: null
},
setItem: (key, value) => {
if (checkWindowsKey('sessionStorage'))
sessionStorage.setItem(key, value)
},
}) as StorageLike
}
function checkWindowsKey(key: string) {
return process.dev && key in window
} how do you think about it? @prazdevs |
I thought Cookies is default but even when I changed my store to: import { defineStore } from "pinia";
export const useStore = defineStore("store", {
state: () => ({
token: '',
}),
actions: {
setToken(token: string) {
this.token = token;
}
},
persist: {
storage: persistedState.cookiesWithOptions({
sameSite: 'strict',
}),
},
}); EDIT: sorry I accidentally pasted wrong image previously thus edit |
whether it's |
So your plugin doesn't make pinia state persist if you set state from the server side of nuxt app lifecycle? |
sure, if you change the state at server side, how we know you have changed when we stand on client side. about share data between server and client, nuxt3 suggests using |
if you wang to persist at client storage after server side changed, we can try to do. but if you want to read value from client storage when server render, it's impossible, because there is no connection to the client side even though itself |
you can do this
https://nuxt.com/docs/guide/directory-structure/middleware |
You could check the changes in pinia in nuxt server side hooks and create server side cookie to then hydrate on client. There is many possibilities to achieve real SSR-friendly persistent state. If you don't support making changes in pinia store from the server side and don't persist those changes then |
if you think we are not SSR-friendly because of we cannot persist client data on server side, just like asking me to count how many lights there are in your house. when you first visited me, I didn't even know who you were, let alone let me find your house. |
Your library is working on client side only. With Nuxt you can load any javascript package on client side only. Going with your logic everything anyone has ever wrote in javascript is SSR friendly. :) SSR in Nuxt gives you entire server side lifecycle. You could hook up function at the end of server lifecycle just before app is sent to browser. In this function you could create a cookie using Then in the browser you could read this cookie, compare and detect changes and apply them to the pinia. This way every change you've made on server to your pinia module - in server plugin, middleware or whatever - would persist and your library would be SSR friendly. |
PRs are always welcome :) That being said, keep in mind the nuxt module is an implementation of the base plugin, to work easily with Nuxt, and for most uses. Not everyone uses middleware and modify pinia stores in there. So, yes, the library is SSR friendly with most use cases. There are lots of cases that could be improved on the nuxt part, but the nuxt implementation is very simple. Keep in mind most of it is my work, on my free time, over nights, so I'd ask to stay respectful, for me and everyone who has contributed so far. SSR is a very complex topic, and Nuxt still changes a lot. Keeping server and client in sync is ridiculously difficult, let alone middleware or server components... The Nuxt module was created when Nuxt3 was released officially, and docs were not even complete. Nuxt module docs are still not complete, and unit testing is still in RFC! tl;dr: be respectful. the module fulfils most people's needs (ssr included) and there will be improvement eventually. also thanks @Abernethy-BY & @MZ-Dlovely for the answers 👍 |
I'm sorry that my thought is wrong before you explained. but the good news is that I have an idea, and I'm trying to solve it tomorrow. |
I have done a lot of stupid things. :( import {useStore} from "~/store/useStore";
export default defineNuxtRouteMiddleware(() => {
const store = useStore();
console.log('store.token1', store.token)
store.setToken('token')
console.log('store.token2', store.token)
// just do this
preset_cookie.$persist()
}); |
if you dont wang to use it by yourself, i can write some thing to make it automatic |
Same on me. I cant get persist states in middleware after refresh page.
|
yep!(clap hands |
Now its okay with adding middleware to this.
Now middleware.
|
This was the missing piece, thanks!! I'm using a Just adding the |
Describe the bug
This is my Pinia module:
I set the state with
setToken
function from the middlewareNow on first app reload I would expect to see logs:
and on the second reload I would expect to see
Instead I see:
Reproduction
https://github.com/d0peCode/nuxt3-pinia-middleware-issue
System Info
Used Package Manager
npm
Validations
The text was updated successfully, but these errors were encountered: