Usage with Quasar v2 and BEX (Browser Extension) Mode

[roberttolton]

Hi,

Wondering if anyone has successfully gotten this working with Quasar in BEX mode?
Here's my stores/index.ts file:

import { store } from 'quasar/wrappers'
import { createPinia } from 'pinia'
import { createPersistedStatePlugin } from 'pinia-plugin-persistedstate-2'

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Store instance.
 */

export default store((/* { ssrContext } */) => {
    const pinia = createPinia()

    console.debug('pinia')

    const installPersistedStatePlugin = createPersistedStatePlugin({
        storage: {

            getItem: async (key) => {

                console.debug('getItem')

                return new Promise((resolve) => {

                    chrome.storage.sync.get(key, (value) => {
                        resolve(value)
                    });

                })

            },

            setItem: async (key, value) => {

                console.debug('setItem')

                return new Promise((resolve) => {

                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                    chrome.storage.sync.set({ [key]: value }, () => {
                        resolve()
                    });

                })

            },

            removeItem: async (key) => {

                console.debug('removeItem')

                return new Promise((resolve) => {

                    chrome.storage.sync.remove(key, () => {
                        resolve()
                    });

                })

            },

        },
    })

    pinia.use((context) => installPersistedStatePlugin(context))

    return pinia
})

For example, I see 'pinia' in the log, but when I make any changes to the state in my actions, none of the storage functions run and nothing ends up in my Chrome storage?

[soc221b]

Update:

The example should work 🤔. Could you provide more examples of your defineStore and its usage?

Sorry, I misunderstood the API 🥲, your example is right, the get function looks like:

get: (keys?: string | string[] | object, callback?: function) => {...}

But the callback function will be passed an object 🤔 :

chrome.storage.sync.get(key, (value) => {
-    resolve(value)
+    resolve(value[key])
});

... Object with items in their key-value mappings.

---

Original:

The get function seems to accept an array of keys:

- chrome.storage.sync.get(key, (value) => {
+ chrome.storage.sync.get([key], (value) => {
    resolve(value)
});

[roberttolton]

@iendeavor Thanks for your reply.

I've edited my stores/index.ts file like so (also switched to chrome local storage):

import { store } from 'quasar/wrappers'
import { createPinia } from 'pinia'
import { createPersistedStatePlugin } from 'pinia-plugin-persistedstate-2'

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Store instance.
 */

export default store((/* { ssrContext } */) => {
    const pinia = createPinia()

    console.debug('pinia')

    const installPersistedStatePlugin = createPersistedStatePlugin({
        storage: {

            getItem: async (key) => {

                console.debug('getItem')

                return new Promise((resolve) => {

                    chrome.storage.local.get([key], value => {
                        resolve(value[key])
                    })

                    // chrome.storage.sync.get(key, (value) => {
                    //     resolve(value[key])
                    // });

                })

            },

            setItem: async (key, value) => {

                console.debug('setItem')

                return new Promise((resolve) => {

                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                    chrome.storage.local.set({ [key]: value }, () => {
                        resolve()
                    })

                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                    // chrome.storage.sync.set({ [key]: value }, () => {
                    //     resolve()
                    // });

                })

            },

            removeItem: async (key) => {

                console.debug('removeItem')

                return new Promise((resolve) => {

                    chrome.storage.local.remove(key, () => {
                        resolve()
                    })

                    // chrome.storage.sync.remove(key, () => {
                    //     resolve()
                    // })

                })

            },

        },
    })

    pinia.use((context) => installPersistedStatePlugin(context))

    return pinia
})

I'm using the Quasar v2 framework, so I guess the setup might be non-standard.

I have a store at auth/index.ts with:

import { defineStore } from 'pinia'
import { User } from 'components/models'
import { auth0Api } from 'boot/axios'

export const useAuthStore = defineStore('auth', {

    state: () => ({
        _currentUser: null as User | null,
        _currentUserLoading: false as boolean,
        _accessToken: null as string | null,
        _accessTokenExpiresAt: null as number | null,
        _refreshToken: null as string | null,
        _codeVerifier: null as string | null,
    }),

    getters: {
        currentUser: (state) => state._currentUser,
        currentUserLoading: (state) => state._currentUserLoading,
        accessToken: (state) => state._accessToken,
        accessTokenExpiresAt: (state) => state._accessTokenExpiresAt,
        refreshToken: (state) => state._refreshToken,
        codeVerifier: (state) => state._codeVerifier,
    },

    actions: {

        async fetchCurrentUser() {

            console.log('authStore > fetchCurrentUser')

            try {

                this._currentUserLoading = true

                const fetchCurrentUserResponse = await auth0Api.get('userinfo')

                this._currentUser = fetchCurrentUserResponse.data ?? null

            } catch (error) {
                console.error(error)
                return error
            } finally {
                this._currentUserLoading = false
            }

        }

    },

})

When I run the fetchCurrentUser() which mutates the state, I would expect to see some log entries for setItem right? As part of the store being persisted? But there's no such logs, and any store mutations are lost when the instance is reloaded.

[roberttolton]

Also weirdly, I'm getting undefined when doing this in my components:

const authStore = useAuthStore()
authStore.$persistedState.pending // undefined

It seems like the plugin isn't actually being installed?

[soc221b]

I try to create a basic example using Quasar CLI here and it works, I don't understand why BEM doesn't work...

I also found this, maybe updating the package will work...

[roberttolton]

Thanks @iendeavor
For this project, I just had to switch back to Vuex to get it finished, but with the updates to Quasar coming I'll try again with another project in future.