Nuxt 2 - Removing vuex-persist
I have an SSR Nuxt 2 app that uses the store. I currently have vuex-persist as a plugin that runs on client side. I wanted to change the default of one of the values from true to false by editing store/index.js, as well as adding a new value. After doing that, when I refresh the page it seems the new default value and the new value is there, but the new default value takes over after the page loads. I found that in the browser localStorage, the old default is still there and the new values are absent.
In my mutations, I also create/update a cookie of the same name. Then, use nuxtServerInit to update the store with what is in the cookie. This syncs up the store on page refresh.
Reviewing this process...I'm starting to think that my vuex-persist plugin is unecessary to have? It doesn't seem to be providing any benefit, and I think it is what is causing my problem with adding/updating default values in my existing store. Having the client restore the store based off of what vuex-persist put in localStorage seems unnecessary when I'm already using nuxtServerInit and the cookies I'm setting.
Am I correct in thinking that I should probably just remove the vuex-persist plugin?
2 Replies
Hi @TomServo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, your reasoning is correct. Based on the information in the knowledge sources, using both vuex-persist (which syncs your Vuex store to localStorage on the client) and a cookie-based approach with nuxtServerInit (which syncs your store from cookies on SSR) is redundant and can lead to conflicts, especially when updating default values or adding new state properties.
The Nuxt documentation and community answers highlight that localStorage is only available on the client side and cannot be accessed during SSR, which can cause hydration mismatches and inconsistent state between server and client. Instead, using cookies (with composables like useCookie in Nuxt 3, or your current approach in Nuxt 2) is recommended for persisting small amounts of data that need to be available on both server and client. This ensures consistent state hydration and avoids the pitfalls of localStorage-based persistence in SSR apps. In fact, several sources recommend removing localStorage-based persistence in favor of cookies for SSR-friendly state management, as cookies are sent with every request and can be accessed server-side during nuxtServerInit or similar mechanisms Persist State Between Reloads in Nuxt v3, Common reasons for hydration mismatch.
Therefore, if your store is already being hydrated from cookies via nuxtServerInit, and you are keeping your cookies in sync with your store mutations, the vuex-persist plugin is unnecessary and may indeed be causing the issues you described. Removing it should simplify your state management and resolve the problems with updating default values and adding new properties.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@80835432241172480> Kapa.ai is still learning and improving, please let me know how I did by reacting below.