soc221b / pinia-plugin-persistedstate-2

Persist and rehydrate your Pinia state between page reloads.
https://www.npmjs.com/package/pinia-plugin-persistedstate-2
MIT License
91 stars 8 forks source link

Unable to persist state ^1.0.0 #27

Closed ASoldo closed 2 years ago

ASoldo commented 2 years ago

Describe the bug I have no errors with pinia, the state is working as expected but I am unable to have persisted state for 'my-state'. Following nuxt 3 universal guide, I have done everything the same but my state is not saved when i change it via code (state.counter++). Also, this code is not updating the counter value in this demo --> https://codesandbox.io/s/github/iendeavor/pinia-plugin-persistedstate-2/tree/main/examples/nuxt-3-universal-example?fontsize=14&hidenavigation=1&theme=dark&view=preview

To Reproduce A reproduce link: https://github.com/ASoldo/nuxt-app

Steps to reproduce the behavior:

I have created fresh Nuxt 3 project with these dependencies. "devDependencies": { "@nuxt/content": "^2.0.1", "@types/cookie": "^0.5.1", "@types/js-cookie": "^3.0.2", "nuxt": "3.0.0-rc.4", "tailwindcss": "^3.1.6" }, "dependencies": { "@heroicons/vue": "^1.0.6", "@nuxt/types": "^2.15.8", "@nuxt/typescript-build": "^2.1.0", "@pinia/nuxt": "^0.2.0", "cookie": "^0.5.0", "js-cookie": "^3.0.1", "pinia": "^2.0.15", "pinia-plugin-persistedstate-2": "^1.0.0" }

this is a plugin that I have followed by .md instructions for Nuxt. import { createPersistedStatePlugin } from 'pinia-plugin-persistedstate-2' import Cookies from 'js-cookie' import cookie from 'cookie' export default function ({ $pinia, ssrContext }) { $pinia.use( createPersistedStatePlugin({ // plugin options goes here storage: { getItem: (key) => { // See https://nuxtjs.org/guide/plugins/#using-process-flags if (process.server) { const parsedCookies = cookie.parse(ssrContext.req.headers.cookie) return parsedCookies[key] } else { return Cookies.get(key) } }, // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON. setItem: (key, value) => Cookies.set(key, value, { expires: 365, secure: false }), removeItem: (key) => Cookies.remove(key), }, }), ) }

this is my nuxt.config.ts modules: ['@pinia/nuxt', '@nuxt/content'], plugins: [ {src: '~/plugins/pinia-persisted2.universal.ts']

this is my state/index.ts import { defineStore } from 'pinia' export const useFiltersStore = defineStore('my-store', () => { const counter = ref<number>(0); return { counter } })

Can you point out if I made some mistake or if I am missing something?

Thank you!

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

ASoldo commented 2 years ago

https://github.com/prazdevs/pinia-plugin-persistedstate/issues/85 Here is the solution!