N
Nuxt•3d ago
FearArt

State Management

Can i somehow shorten this code? 
const TVstate = () => {
  if (openedRoom.value.hasTV === 'unknown') {
      openedRoom.value.hasTV = 'Yes'
      imageLibrary.value.TVImage = 'img/pngs/tv-green.png'
  }
  else if (openedRoom.value.hasTV === 'Yes') {
      openedRoom.value.hasTV = 'No'
      imageLibrary.value.TVImage = 'img/pngs/tv-red.png'
  }
  else {
      openedRoom.value.hasTV = 'unknown'
      imageLibrary.value.TVImage = 'img/pngs/tv-gray.png'
  }
}
const AcessPointstate = () => {
  if (openedRoom.value.hasAccessPoint === 'unknown') {
      openedRoom.value.hasAccessPoint = 'Yes'
      imageLibrary.value.AccessPointImage = 'img/pngs/wifi-green.png'
  }
  else if (openedRoom.value.hasAccessPoint === 'Yes') {
      openedRoom.value.hasAccessPoint = 'No'
      imageLibrary.value.AccessPointImage = 'img/pngs/wifi-red.png'
  }
  else {
      openedRoom.value.hasAccessPoint = 'unknown'
      imageLibrary.value.AccessPointImage = 'img/pngs/wifi-gray.png'
  }
}
const Phonestate = () => {
  if (openedRoom.value.hasPhone === 'unknown') {
      openedRoom.value.hasPhone = 'Yes'
      imageLibrary.value.PhoneImage = 'img/pngs/phone-green.png'
  }
  else if (openedRoom.value.hasPhone === 'Yes') {
      openedRoom.value.hasPhone = 'No'
      imageLibrary.value.PhoneImage = 'img/pngs/phone-red.png'
  }
  else {
      openedRoom.value.hasPhone = 'unknown'
      imageLibrary.value.PhoneImage = 'img/pngs/phone-gray.png'
  }
}
const BathPhonestate = () => {
  if (openedRoom.value.hasBathPhone === 'unknown') {
      openedRoom.value.hasBathPhone = 'Yes'
      imageLibrary.value.BathPhoneImage = 'img/pngs/bath-green.png'
  }
  else if (openedRoom.value.hasBathPhone === 'Yes') {
      openedRoom.value.hasBathPhone = 'No'
      imageLibrary.value.BathPhoneImage = 'img/pngs/bath-red.png'
  }
  else {
      openedRoom.value.hasBathPhone = 'unknown'
      imageLibrary.value.BathPhoneImage = 'img/pngs/bath-gray.png'
  }
}
const TVstate = () => {
  if (openedRoom.value.hasTV === 'unknown') {
      openedRoom.value.hasTV = 'Yes'
      imageLibrary.value.TVImage = 'img/pngs/tv-green.png'
  }
  else if (openedRoom.value.hasTV === 'Yes') {
      openedRoom.value.hasTV = 'No'
      imageLibrary.value.TVImage = 'img/pngs/tv-red.png'
  }
  else {
      openedRoom.value.hasTV = 'unknown'
      imageLibrary.value.TVImage = 'img/pngs/tv-gray.png'
  }
}
const AcessPointstate = () => {
  if (openedRoom.value.hasAccessPoint === 'unknown') {
      openedRoom.value.hasAccessPoint = 'Yes'
      imageLibrary.value.AccessPointImage = 'img/pngs/wifi-green.png'
  }
  else if (openedRoom.value.hasAccessPoint === 'Yes') {
      openedRoom.value.hasAccessPoint = 'No'
      imageLibrary.value.AccessPointImage = 'img/pngs/wifi-red.png'
  }
  else {
      openedRoom.value.hasAccessPoint = 'unknown'
      imageLibrary.value.AccessPointImage = 'img/pngs/wifi-gray.png'
  }
}
const Phonestate = () => {
  if (openedRoom.value.hasPhone === 'unknown') {
      openedRoom.value.hasPhone = 'Yes'
      imageLibrary.value.PhoneImage = 'img/pngs/phone-green.png'
  }
  else if (openedRoom.value.hasPhone === 'Yes') {
      openedRoom.value.hasPhone = 'No'
      imageLibrary.value.PhoneImage = 'img/pngs/phone-red.png'
  }
  else {
      openedRoom.value.hasPhone = 'unknown'
      imageLibrary.value.PhoneImage = 'img/pngs/phone-gray.png'
  }
}
const BathPhonestate = () => {
  if (openedRoom.value.hasBathPhone === 'unknown') {
      openedRoom.value.hasBathPhone = 'Yes'
      imageLibrary.value.BathPhoneImage = 'img/pngs/bath-green.png'
  }
  else if (openedRoom.value.hasBathPhone === 'Yes') {
      openedRoom.value.hasBathPhone = 'No'
      imageLibrary.value.BathPhoneImage = 'img/pngs/bath-red.png'
  }
  else {
      openedRoom.value.hasBathPhone = 'unknown'
      imageLibrary.value.BathPhoneImage = 'img/pngs/bath-gray.png'
  }
}
2 Replies
kapa.ai
kapa.ai•3d ago
Hi @FearArt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources and your question about state management in Nuxt, I can offer some suggestions to shorten and improve your code. While the exact code you've provided isn't present in the knowledge sources, we can apply Nuxt's state management principles to refactor it. Here's a way to shorten your code using Nuxt's useState composable: 
const useRoomState = (feature) => {
  const openedRoom = useState('openedRoom', () => ({}))
  const imageLibrary = useState('imageLibrary', () => ({}))

  const states = ['unknown', 'Yes', 'No']
  const colors = ['gray', 'green', 'red']

  const toggleState = () => {
    const currentIndex = states.indexOf(openedRoom.value[`has${feature}`])
    const nextIndex = (currentIndex + 1) % states.length
    openedRoom.value[`has${feature}`] = states[nextIndex]
    imageLibrary.value[`${feature}Image`] = `img/pngs/${feature.toLowerCase()}-${colors[nextIndex]}.png`
  }

  return toggleState
}

// Usage
const TVstate = useRoomState('TV')
const AccessPointState = useRoomState('AccessPoint')
const PhoneState = useRoomState('Phone')
const BathPhoneState = useRoomState('BathPhone')
const useRoomState = (feature) => {
  const openedRoom = useState('openedRoom', () => ({}))
  const imageLibrary = useState('imageLibrary', () => ({}))

  const states = ['unknown', 'Yes', 'No']
  const colors = ['gray', 'green', 'red']

  const toggleState = () => {
    const currentIndex = states.indexOf(openedRoom.value[`has${feature}`])
    const nextIndex = (currentIndex + 1) % states.length
    openedRoom.value[`has${feature}`] = states[nextIndex]
    imageLibrary.value[`${feature}Image`] = `img/pngs/${feature.toLowerCase()}-${colors[nextIndex]}.png`
  }

  return toggleState
}

// Usage
const TVstate = useRoomState('TV')
const AccessPointState = useRoomState('AccessPoint')
const PhoneState = useRoomState('Phone')
const BathPhoneState = useRoomState('BathPhone')
This refactored code uses Nuxt's useState composable to create reactive state for openedRoom and imageLibrary. The useRoomState function creates a toggling mechanism for each feature, cycling through the states and updating the corresponding image. Here's how this approach aligns with Nuxt's state management principles: 1. It uses useState for creating reactive state, as recommended in the Nuxt documentation on State Management. 2. It follows the best practice of using a function to create shared state, as mentioned in the Best Practices section. 3. The state is kept server-side rendering (SSR) friendly, which is a key feature of useState in Nuxt. This refactored version significantly reduces code duplication and makes it easier to add new features in the future. Each state-changing function (TVstate, AccessPointState, etc.) is now created by calling useRoomState with the appropriate feature name. Remember to adjust the implementation details according to your specific needs and the broader context of your Nuxt application. Nuxt Documentation on State Management ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@360699173378588674> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?