UseState with a state coming from a db

Hello, I've issue with reactive state for useState, I fetch players from a DB and place them into the global state, but the components getting the global state are not updating to get the version that is coming from client side rendering when i load the page from another page.

export function useRetrievePlayers() {
  const { data } = useFetch('/api/baseball/retrieve-players');

  const players = computed(() => {
    console.log('data', data.value);
    if (!data.value) {
      return [];
    }

    return data.value.players;
  });

  return players;
}

export function useRetrievePlayers() {
  const { data } = useFetch('/api/baseball/retrieve-players');

  const players = computed(() => {
    console.log('data', data.value);
    if (!data.value) {
      return [];
    }

    return data.value.players;
  });

  return players;
}

This is my composables that I use in parent:

const players = useRetrievePlayers();
  useState('players', () => players);

const players = useRetrievePlayers();
  useState('players', () => players);

I've tried using my useState in my computed prop it didnt work either.

I retrieve it like so in child:

 const { value: players } = useState('players');

 const { value: players } = useState('players');

I am pretty new to vue/nuxt sorry.

I do not know if this is a good way to use the global store either

Each component are children of each other so I could've done prop drilling or injection. I think it would be a better fit ig, but I wanna know if what I want to do is possible

UseState with a state coming from a db

export function useRetrievePlayers() {
  const { data } = useFetch('/api/baseball/retrieve-players');

  const players = computed(() => {
    console.log('data', data.value);
    if (!data.value) {
      return [];
    }

    return data.value.players;
  });

  return players;
}

export function useRetrievePlayers() {
  const { data } = useFetch('/api/baseball/retrieve-players');

  const players = computed(() => {
    console.log('data', data.value);
    if (!data.value) {
      return [];
    }

    return data.value.players;
  });

  return players;
}

This is my composables that I use in parent:

const players = useRetrievePlayers();
  useState('players', () => players);

const players = useRetrievePlayers();
  useState('players', () => players);

I've tried using my useState in my computed prop it didnt work either.

I retrieve it like so in child:

 const { value: players } = useState('players');

 const { value: players } = useState('players');

UseState with a state coming from a db

UseState with a state coming from a db

Continue the conversation

Nuxt

Continue the conversation

Nuxt

Similar Threads