Wild
Wild
PostsComments
NNuxt
Created by Wild on 5/1/2024 in #❓・help
Is it possible to initialize store state with async function ?
Thanks for the advice ! I watched a lot of your useFetch & co video, it helped me a lot ! thanks for that also
8 replies
NNuxt
Created by Wild on 5/1/2024 in #❓・help
Is it possible to initialize store state with async function ?
import { skipHydrate } from "pinia";
import { useAsyncState } from "@vueuse/core";
const key = "job";

export const useJobStore = defineStore(key, () => {
  const { state, isReady, isLoading } = useAsyncState(
    ifetch().then((data) => data),
    { id: null }
  );
  async function ifetch() {
    return new Promise(async function (resolve, reject) {
      if (process.client) {
        console.log("process client");
        const db = await getIdb.value;
        console.log(db);
        const data_trans = db.transaction("test").objectStore("test").get(key);
        data_trans.onsuccess = async (event) => {
          try {
            console.log("success");
            let buffer = data_trans.result;
            console.log(buffer);

            resolve(
              new Map<number, string>(
                buffer.map((raw) => {
                  return [raw.id, raw.title];
                })
              )
            );
          } catch (error) {
            console.log("error", error);
            const buffer: any = await $fetch(
              `https://jsonplaceholder.typicode.com/posts/`,
              {
                headers: { "Content-Type": "application/json" },
                method: "GET",
              }
            );
            db.transaction("test", "readwrite")
              .objectStore("test")
              .put(buffer, key);
            resolve(
              new Map<number, string>(
                buffer.map((raw) => {
                  return [raw.id, raw.title];
                })
              )
            );
          }
        };
        data_trans.onerror = async (event) => {
          console.log(data_trans.error);
        };
      }
    });
  }
  return { state};
});
import { skipHydrate } from "pinia";
import { useAsyncState } from "@vueuse/core";
const key = "job";

export const useJobStore = defineStore(key, () => {
  const { state, isReady, isLoading } = useAsyncState(
    ifetch().then((data) => data),
    { id: null }
  );
  async function ifetch() {
    return new Promise(async function (resolve, reject) {
      if (process.client) {
        console.log("process client");
        const db = await getIdb.value;
        console.log(db);
        const data_trans = db.transaction("test").objectStore("test").get(key);
        data_trans.onsuccess = async (event) => {
          try {
            console.log("success");
            let buffer = data_trans.result;
            console.log(buffer);

            resolve(
              new Map<number, string>(
                buffer.map((raw) => {
                  return [raw.id, raw.title];
                })
              )
            );
          } catch (error) {
            console.log("error", error);
            const buffer: any = await $fetch(
              `https://jsonplaceholder.typicode.com/posts/`,
              {
                headers: { "Content-Type": "application/json" },
                method: "GET",
              }
            );
            db.transaction("test", "readwrite")
              .objectStore("test")
              .put(buffer, key);
            resolve(
              new Map<number, string>(
                buffer.map((raw) => {
                  return [raw.id, raw.title];
                })
              )
            );
          }
        };
        data_trans.onerror = async (event) => {
          console.log(data_trans.error);
        };
      }
    });
  }
  return { state};
});
8 replies
NNuxt
Created by Wild on 5/1/2024 in #❓・help
Is it possible to initialize store state with async function ?
Well not sure why it works, but it seems to work perfect with either hydration and mount and ssr.
8 replies
NNuxt
Created by Wild on 5/1/2024 in #❓・help
Is it possible to initialize store state with async function ?
when you say a init function, is it like literally a function named init ? Since I want to check the indexedDb only on the client, I've had some issue with the hydration. when I use skipHydrate, I have a cannot stringify non pogo error
8 replies
NNuxt
Created by Wild on 5/1/2024 in #❓・help
Is it possible to initialize store state with async function ?
import { skipHydrate } from "pinia";
const key = "item";

export const useItemStore = defineStore(key, {
  state: () => ({
    itemtypes: new Map(),
    fetching: false,
  }),
  actions: {
    async fetch() {
      return new Promise(async function (resolve, reject) {
        if (process.client) {
          console.log("process client");
          const db = await getIdb.value;
          console.log(db);
          const data_trans = db
            .transaction("test")
            .objectStore("test")
            .get(key);
          data_trans.onsuccess = async (event) => {
            try {
              console.log("success");
              let buffer = data_trans.result;
              console.log(buffer);

              resolve(
                new Map<number, string>(
                  buffer.map((raw) => {
                    return [raw.id, raw.title];
                  })
                )
              );
            } catch (error) {
              console.log("error", error);
              const buffer: any = await $fetch(
                `https://jsonplaceholder.typicode.com/posts/`,
                {
                  headers: { "Content-Type": "application/json" },
                  method: "GET",
                }
              );
              db.transaction("test", "readwrite")
                .objectStore("test")
                .put(buffer, key);
              resolve(
                new Map<number, string>(
                  buffer.map((raw) => {
                    return [raw.id, raw.title];
                  })
                )
              );
            }
          };
          data_trans.onerror = async (event) => {
            console.log(data_trans.error);
          };
        }
      });
    },
  hydrate(state, initialState) {
    console.log("hydrating !!!");
    this.actions.fetch().then((value) => (state.itemtypes = value));
  },
});
import { skipHydrate } from "pinia";
const key = "item";

export const useItemStore = defineStore(key, {
  state: () => ({
    itemtypes: new Map(),
    fetching: false,
  }),
  actions: {
    async fetch() {
      return new Promise(async function (resolve, reject) {
        if (process.client) {
          console.log("process client");
          const db = await getIdb.value;
          console.log(db);
          const data_trans = db
            .transaction("test")
            .objectStore("test")
            .get(key);
          data_trans.onsuccess = async (event) => {
            try {
              console.log("success");
              let buffer = data_trans.result;
              console.log(buffer);

              resolve(
                new Map<number, string>(
                  buffer.map((raw) => {
                    return [raw.id, raw.title];
                  })
                )
              );
            } catch (error) {
              console.log("error", error);
              const buffer: any = await $fetch(
                `https://jsonplaceholder.typicode.com/posts/`,
                {
                  headers: { "Content-Type": "application/json" },
                  method: "GET",
                }
              );
              db.transaction("test", "readwrite")
                .objectStore("test")
                .put(buffer, key);
              resolve(
                new Map<number, string>(
                  buffer.map((raw) => {
                    return [raw.id, raw.title];
                  })
                )
              );
            }
          };
          data_trans.onerror = async (event) => {
            console.log(data_trans.error);
          };
        }
      });
    },
  hydrate(state, initialState) {
    console.log("hydrating !!!");
    this.actions.fetch().then((value) => (state.itemtypes = value));
  },
});
8 replies
NNuxt
Created by Wild on 4/27/2024 in #❓・help
How to share an indexedDb
I changed my approach : like L422Y, I use a store. The store has a internal state, where i store the ref to my IndexedDb. When I access my db, I go through a computed getter which fetch the db if it is initialized, otherwise it set it. And I use my store where need be
53 replies
NNuxt
Created by Wild on 4/27/2024 in #❓・help
How to share an indexedDb
actually pinia plugins seem to be loaded on every store mount, not what I'm looking for
53 replies
NNuxt
Created by Wild on 4/27/2024 in #❓・help
How to share an indexedDb
the last blitz : https://stackblitz.com/edit/nuxt-starter-swapms?file=plugins%2Fpinia.client.ts
53 replies
NNuxt
Created by Wild on 4/27/2024 in #❓・help
How to share an indexedDb
I am very close ! @pyplaca still a order issue thing, I found here https://medium.com/testing-nuxt-applications/introduction-to-nuxt-plugins-and-modules-7f10887ef31b that nuxt load Modules then plugin. So as a pinia plugin, it get loaded before other plugin. However, the time it take to resolve is enough to break the store, which starts hydrating before the plugin finished its' async stuff ! In parts due to me switchin from my homemade onHydrated trigger for the hydrate pinia function. I see that if I was waiting for it, it would work. Any idea of how I could nicely wait for the plugin to resolve ?
53 replies
NNuxt
Created by Wild on 4/27/2024 in #❓・help
How to share an indexedDb
oh I see, you're using the localforage mentionned. I see the plugin is nuxt2 only, you use localforage directly ? Thanks for the code sample
53 replies
NNuxt
Created by Wild on 4/27/2024 in #❓・help
How to share an indexedDb
can you do mycomposable.transaction... in your stores ? or should this be handled in the composable itself ?
53 replies
NNuxt
Created by Wild on 4/27/2024 in #❓・help
How to share an indexedDb
I am trying to initialize the indexeddb only once and then share a ref (not vue ref because I don't think reactivity is usefull here) to avoid all the onsuccess/ onerror boilerplate, is that what you do in your composable ? We used a plugin with @pyplacca to instanciate our db, can this be bypassed with just using a composable ?
53 replies
NNuxt
Created by Wild on 4/27/2024 in #❓・help
How to share an indexedDb
I'd love an example as I am not that versed in js/nuxt world but it seems exactly like what I am trying to do, I'm having a hard type with the async and onsuccess events
53 replies
NNuxt
Created by Wild on 4/27/2024 in #❓・help
How to share an indexedDb
is my stackblitz fine or should I redo it with nuxt.new ?
53 replies
NNuxt
Created by Wild on 4/27/2024 in #❓・help
How to share an indexedDb
Lol this is unfair xD Maybe I thinking about it all wrong
53 replies
NNuxt
Created by Wild on 4/27/2024 in #❓・help
How to share an indexedDb
maybe I should make this a pinia plugin, maybe it'll be loaded right then
53 replies
NNuxt
Created by Wild on 4/27/2024 in #❓・help
How to share an indexedDb
seems pretty representative
53 replies
NNuxt
Created by Wild on 4/27/2024 in #❓・help
How to share an indexedDb
https://stackblitz.com/edit/nuxt-starter-jec6zh?file=stores%2Fitem_types.ts
53 replies
NNuxt
Created by Wild on 4/27/2024 in #❓・help
How to share an indexedDb
any website reco for this ?
53 replies
NNuxt
Created by Wild on 4/27/2024 in #❓・help
How to share an indexedDb
I tried awaiting the idb.value, but since the ref is undefined it doesn't do anything
53 replies