Comments (12)
Hi, Quasar core team member here 👋
It's about Pinia's limitation about using plugins before the app is initialized:
quasarframework/quasar#12736 (comment)
We will release first-party Pinia support soon, and mention this limitation on our docs, pointing to the Pinia documentation.
from pinia-plugin-persistedstate.
Ok thanks, you have set me on the right path because I have narrowed it down to being a problem with my Quasar boot file.
Also I realised the opening post wasn't very clear, so I have updated it to reflect the current situation.
Will post an update here if I find one!
from pinia-plugin-persistedstate.
Quasar Framework has first-party Pinia support since @quasar/app-vite-v1.0.0-beta.1 and @quasar/app-webpack-v3.4.0.
This limitation is by-passed by passing the store to the app instance earlier since @quasar/app-vite-v1.0.0-beta.3 and @quasar/app-webpack-v3.4.3.
So, I think this issue can be closed now. But, I think something like createQuasarPersistedState
that uses LocalStorage/SessionStorage and/or Cookies plugins would be really cool. It can be supported with a boot file example(similar to Nuxt's plugins). These great samples from @TobyMosque might be used as a reference implementation:
The boot file that contains an alternative implementation to pinia-plugin-persistedstate
:
https://github.com/TobyMosque/quasar-v2-ssr-pinia/blob/47d05b5595b42a2c77f5e502f2ffee2b0be76a3d/src/boot/persist-store.ts
Individual stores using different storage plugins:
https://github.com/TobyMosque/quasar-v2-ssr-pinia/blob/47d05b5595b42a2c77f5e502f2ffee2b0be76a3d/src/stores/persisted-localstorage.ts
https://github.com/TobyMosque/quasar-v2-ssr-pinia/blob/47d05b5595b42a2c77f5e502f2ffee2b0be76a3d/src/stores/persisted-sessionstorage.ts
https://github.com/TobyMosque/quasar-v2-ssr-pinia/blob/47d05b5595b42a2c77f5e502f2ffee2b0be76a3d/src/stores/persisted-cookie.ts
from pinia-plugin-persistedstate.
started working on a helper for Quasar, i'll try to expose 3:
- cookies
- localstorage
- sessionstorage
👍
from pinia-plugin-persistedstate.
localstorage
and sessionstorage
will work out of box, so u don't need to worry.
regarding the cookies
, i was able to make Pinia Persisted State Plugin work with the Quasar Cookies Plugin, but my solution is nesty, to not say ugly.
first, u'll need a fake storage:
import { StorageLike } from 'pinia-plugin-persistedstate';
export const cookieStorage: StorageLike = {
getItem(key: string) {
return '';
},
setItem(key: string, value: string) {
return;
},
};
we just need something (the fake storage) to import in the stores, like this:
import { defineStore } from 'pinia';
import { cookieStorage } from './storages';
export const useAppStore = defineStore('app', {
state: () => ({
token: '',
}),
persist: {
storage: cookieStorage,
},
});
so, we can replace that fake storage by the real one in a boot
or in the stores/index
import { store } from 'quasar/wrappers';
import { createPinia } from 'pinia';
import PiniaPersistedStatePlugin from 'pinia-plugin-persistedstate';
import { cookieStorage } from './storages';
import { Cookies } from 'quasar';
export default store(({ ssrContext }) => {
const pinia = createPinia();
// You can add Pinia plugins here
// pinia.use(SomePiniaPlugin)
const cookies = process.env.SERVER ? Cookies.parseSSR(ssrContext) : Cookies; // otherwise we're on client
pinia.use(({ options }) => {
if (!options.persist || typeof options.persist === 'boolean') {
return;
}
if (options.persist.storage === cookieStorage) {
options.persist.storage = {
getItem(key: string) {
return JSON.stringify(cookies.get(key));
},
setItem(key: string, value: string) {
const obj = JSON.parse(value);
cookies.set(key, obj, { path: '/', sameSite: 'Lax', secure: true });
},
};
}
});
pinia.use(PiniaPersistedStatePlugin);
return pinia;
});
This would be done before the PiniaPersistedStatePlugin be configured.
here the source:
https://github.com/TobyMosque/ws-auth-samples-frontend/tree/persist-after/src/stores
from pinia-plugin-persistedstate.
maybe as a plugin.:
# the package will be named as quasar-app-extension-pinia-persistedstate
quasar ext add pinia-persistedstate
this extension will install the PiniaPersistedStatePlugin, the Cookies Plugins and register the boots.
so, in the dev land:
import { defineStore } from 'pinia';
# pinia-plugin-persistedstate/quasar is an alias to quasar-app-extension-pinia-persistedstate
import { CookieStorage, /*LocalStorage, SessionStorage,IndexedStorage*/ } from 'pinia-plugin-persistedstate/quasar';
export const useAppStore = defineStore('app', {
state: () => ({
token: '',
}),
persist: {
storage: CookieStorage,
},
});
more about quasar extensions:
https://quasar.dev/app-extensions/tips-and-tricks/inject-quasar-plugin
from pinia-plugin-persistedstate.
v2.1.0
now offers quasar helpers. Docs are also updated with how to use it!
I kept it iso with the way the Nuxt helper is made for now.
Closing this for now? feel free to reopen if you feel like something is off/odd/broken
from pinia-plugin-persistedstate.
I dont really see what could be wrong, but I played a bit with the reprod repo, and in the vue devtools, there is no event related to pinia that is fired. This is weird and I dont really understand why, but that could be related to the issue since we subscribe to state mutations (like the devtools). My guess is there is smth with quasar, and i never used it so I can't help much atm. I'll try to look further, or if anyone has an idea.
from pinia-plugin-persistedstate.
yeah i think i took inspiration from some of your repos as im very unfamiliar with Quasar. Idea was to provide a helper as simple to use as this :
import { boot } from "quasar/wrappers";
import { Cookies } from "quasar";
import {
createQuasarCookiesPersistedState
} from "pinia-plugin-persistedstate/quasar";
export default boot(({ store, ssrContext }) => {
store.use(createQuasarCookiesPersistedState(Cookies, ssrContext));
});
Kinda like what we did for Nuxt
from pinia-plugin-persistedstate.
that's fairly interesting. i never use quasar (cause its wayyy too heavy for what i do with vue). But whenever i have time i'll look into maybe making a quasar plugin as you suggest!
(or someone can try to do it 😄)
thanks a lot!
from pinia-plugin-persistedstate.
cause its wayyy too heavy for what i do with vue.
Fallacies I hear every day ;D
Quasar is suitable for all project sizes, even the smallest ones.
from pinia-plugin-persistedstate.
localstorage
andsessionstorage
will work out of box, so u don't need to worry. regarding thecookies
, i was able to make Pinia Persisted State Plugin work with the Quasar Cookies Plugin, but my solution is nesty, to not say ugly.first, u'll need a fake storage:
import { StorageLike } from 'pinia-plugin-persistedstate'; export const cookieStorage: StorageLike = { getItem(key: string) { return ''; }, setItem(key: string, value: string) { return; }, };we just need something (the fake storage) to import in the stores, like this:
import { defineStore } from 'pinia'; import { cookieStorage } from './storages'; export const useAppStore = defineStore('app', { state: () => ({ token: '', }), persist: { storage: cookieStorage, }, });so, we can replace that fake storage by the real one in a
boot
or in thestores/index
import { store } from 'quasar/wrappers'; import { createPinia } from 'pinia'; import PiniaPersistedStatePlugin from 'pinia-plugin-persistedstate'; import { cookieStorage } from './storages'; import { Cookies } from 'quasar'; export default store(({ ssrContext }) => { const pinia = createPinia(); // You can add Pinia plugins here // pinia.use(SomePiniaPlugin) const cookies = process.env.SERVER ? Cookies.parseSSR(ssrContext) : Cookies; // otherwise we're on client pinia.use(({ options }) => { if (!options.persist || typeof options.persist === 'boolean') { return; } if (options.persist.storage === cookieStorage) { options.persist.storage = { getItem(key: string) { return JSON.stringify(cookies.get(key)); }, setItem(key: string, value: string) { const obj = JSON.parse(value); cookies.set(key, obj, { path: '/', sameSite: 'Lax', secure: true }); }, }; } }); pinia.use(PiniaPersistedStatePlugin); return pinia; });This would be done before the PiniaPersistedStatePlugin be configured.
here the source: https://github.com/TobyMosque/ws-auth-samples-frontend/tree/persist-after/src/stores
thanks aloooot man <3
from pinia-plugin-persistedstate.
Related Issues (20)
- reactive([1]) Unable to deserialize properly HOT 2
- Save to store after X seconds of no further changes. HOT 1
- Having interval inside a persistent store breaks persisting
- [pinia-plugin-persistedstate] Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin HOT 2
- In the cookie store defineNuxtRouteMiddleware method was used in nuxt3 unable to get to the store of value HOT 3
- Critical security vulnerability? HOT 6
- nuxt bug Cannot read properties of undefined (reading 'sessionStorage') HOT 1
- Automatically set `Vary: Cookie` response header in Nuxt SSR
- pinia.use(piniaPersist) in a separate file, causing local storage to fail HOT 2
- Missing "./package.json" export HOT 1
- Not effective when working with vee-validate
- Global `cookieOptions` are not applied in Nuxt 3 HOT 1
- Type safe persist paths HOT 2
- Store not hydrated from cookies when used with `@nuxtjs/i18n` and `routeRules`
- Using store outside setup(), state persistence is not possible HOT 1
- The type of map print in console.log (typeof this.userMap) is object HOT 1
- Persist for "composition api" style HOT 1
- 配置 storage: persistedState.sessionStorage 会导致 v-bind 失效
- Vue: Argument of type HOT 2
- when to persist and when to recover
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pinia-plugin-persistedstate.