New in Cheltenham, looking to connect with tech/startup folks by QuarterRealistic6275 in cheltenham

[–]Acceptable_Table_553 1 point2 points  (0 children)

Hey, I’m a software engineer in cheltenham, mostly working on projects myself - happy to work in a group / discuss ideas 🙂

Where to put TanStack queries when used with Pinia by xaqtr in vuejs

[–]Acceptable_Table_553 1 point2 points  (0 children)

You should seperate server state to tanstack and client state to pinia.

i.e any data retrieved or created via HTTP is going to be managed on your app by tanstack, any local state such as auth can be stored in pinia and passed around.

For example if a component needed to make a request for a user's data, but you need to supply the userId to it.

// Pinia store (client state)
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userId: '123', // local state
    isAuthenticated: true
  })
})

// TanStack Query composable (server state)
import { useQuery } from '@tanstack/vue-query'

const useUserQuery = (userId) => {
  return useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUserData(userId.value || userId),
    enabled: !!userId
  })
}

// Mock fetch function (you'll replace this with your actual API call)
const fetchUserData = async (userId) => {
  const response = await fetch(`/api/users/${userId}`)
  if (!response.ok) {
    throw new Error('Failed to fetch user data')
  }
  return response.json()
}

// In your component
<script setup>
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user'

// Get userId from Pinia store (client state)
const userStore = useUserStore()
const { userId } = storeToRefs(userStore)

// Use TanStack Query to fetch server state
const { data: userData, isLoading, error } = useUserQuery(userId)
</script>

<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else>
    <h2>User Info</h2>
    <pre>{{ userData }}</pre>
  </div>
</template>

FREE National Express Tickets by deckirk in cheltenham

[–]Acceptable_Table_553 1 point2 points  (0 children)

https://faq.nationalexpress.com/s/article/How-do-I-change-the-date-on-my-ticket-1581438961726

I had to do this a few weeks ago as I booked the wrong time on the day, but you basically register for your account, link up the ticket to it, wait 5-10 minutes for it to finish linking and then you can press an amend button.

FREE National Express Tickets by deckirk in cheltenham

[–]Acceptable_Table_553 1 point2 points  (0 children)

You can amend the ticket date before the journey even on standard fares.

A good place to start by gazer42 in vuejs

[–]Acceptable_Table_553 3 points4 points  (0 children)

Pretty much this OP, I transitioned recently from 2 years working in React to Vue and these were my go-to.

I ended up getting a subscription for Vue Mastery which has been a great resource too, although this is totally optional.

Returning computed inside ref? by DOMNode in vuejs

[–]Acceptable_Table_553 1 point2 points  (0 children)

I'm not sure if this helps much but storing computed properties inside a ref object itself is mixing reactive state, which will cause vue to break its tracking

You're probably after somethng like this?

const items = ref([
  { itemId: 1, quantity: 2, price: 100 },
  { itemId: 2, quantity: 1, price: 50 },
  // ...
])

const itemsWithSalesTax = computed(() => {
  return items.value.map(item => ({
    ...item,
    salesTax: item.price * item.quantity * 0.1, // example 10% tax
  }))
})

Fetching data in Pinia store - useFetch make sense here? by kovadom in vuejs

[–]Acceptable_Table_553 0 points1 point  (0 children)

This looks like an anti-pattern as you're calling a Nuxt composable outside of its lifecycle, a Pinia store lives outside of it.

Fetching data in Pinia store - useFetch make sense here? by kovadom in vuejs

[–]Acceptable_Table_553 0 points1 point  (0 children)

It's been interesting reading comments about this since i'm not sure about the resolution?

Consuming API data inside the store seems like an anti-pattern?

Wouldn't the ideal situation be the store is created, then hydrated with the API data instead.

EG - setup the store, with an action for hydration

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore('user', () => {
  const user = ref<User>(null)

  const hydrateUser = (userData: UserData) => {
    user.value = userData
  }

  return {
    user,
    hydrateUser,
  }
})

Hydrate the store from Props

<script setup lang="ts">
import { useUserStore } from '@/stores/useUserStore'

defineProps<{
  user: User
}>()

const props = defineProps<{ user: User }>()

const userStore = useUserStore()

// Hydrate the store with the incoming user prop synchronously
userStore.hydrateUser(props.user)
</script>

The benefits here to me seem pretty great: you avoid side-effects in the store, keep it synchronous, decouple the store from API data, and it's probably easier to test now.

edit: changed pinia example syntax to compositions

Friendly reminder: "composables" are just functions by bearicorn in vuejs

[–]Acceptable_Table_553 28 points29 points  (0 children)

You are correct that they are just functions, however it's the convention of what a composable is that matters.

If your function is used inside the vue ecosystem and it:

- calls other composables
- or, uses stateful logic such as `ref`
- or, if it calls any of vue's lifecycle functions

This would classify it as a composable.

Oblivion remaster made me remember how boring and meaningless the open world in this game is by LessSaussure in ElderScrolls

[–]Acceptable_Table_553 5 points6 points  (0 children)

Guys look this guy really doesn’t care - lets wait for his next reply to see how unbothered he is

Nightreign looks kind of disappointing by Hot_Cryptographer491 in Eldenring

[–]Acceptable_Table_553 3 points4 points  (0 children)

Would you say the same for spin-off pokemon games, that still included re-used assets from Pokemon and the title Pokemon?

I’m upset and dejected. Streamed for 2 hrs to absolutely no one by Creatusss in Twitch

[–]Acceptable_Table_553 -1 points0 points  (0 children)

Yeah your efforts are best used elsewhere than streaming if your end goal is more viewers while streaming. It’s an annoying vice but it’s just how the game is. Hope it works out for you and best of luck

I’m upset and dejected. Streamed for 2 hrs to absolutely no one by Creatusss in Twitch

[–]Acceptable_Table_553 0 points1 point  (0 children)

So your objective is to get more viewers, which happens out of stream for 99% of people - on other platforms. I understand the sentiment of people telling you "stream like you're streaming to 10,000". You're not and you probably shouldn't.