NuxtN
Nuxt•2y ago
lp

State not changing when using a composables

Hello, my component was not updating when I changed player id using a composables when I placed this directly in component it was working but as composables it wasn't:

import { ref, computed } from 'vue';
import { throws } from '~/data/baseball';

export function usePlayerData(players, playerId) {
const selectedPlayer = computed(() => {
if (playerId === null) {
return null;
}

return players.find((player) => player.id == playerId);
});

const selectedThrows = computed(() => {
if (selectedPlayer.value === null) {
return null;
}

return throws.filter((shot) => shot.player_id === selectedPlayer.value.id);
});

return { selectedPlayer, selectedThrows };
}


So this is now my composables and in my component:


const props = defineProps({
playerId: {
required: true,
},
});

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

const { selectedPlayer, selectedThrows } = usePlayerData(
players,
props.playerId
);

This was not working anyone knows why?

This works tho:

Composables:

import { ref, computed } from 'vue';
import { throws } from '~/data/baseball';

export function usePlayerData(players, playerId) {
const selectedPlayer = computed(() => {
if (playerId.value === null) {
return null;
}

return players.find((player) => player.id == playerId.value);
});

const selectedThrows = computed(() => {
if (selectedPlayer.value === null) {
return null;
}

return throws.filter((shot) => shot.player_id === selectedPlayer.value.id);
});

return { selectedPlayer, selectedThrows };
}


Component:

const props = defineProps({
playerId: {
required: true,
},
});

const reactivePlayerId = ref(props.playerId);

watch(
() => props.playerId,
(newPlayerId) => {
reactivePlayerId.value = newPlayerId;
}
);

const { selectedPlayer, selectedThrows } = usePlayerData(
players,
reactivePlayerId
);

I used a watch for my ref
Was this page helpful?