es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Enrutador Vue con TypeScript y guardia beforeEnter, ¿cómo usar datos validados?

30 May, 2023 Programación

Estoy usando Vue y vue-router con typescript, tengo el caso común de una única página para mostrar un componente de Foto. Tengo una ruta con un guardia beforeEnter que consulta mi tienda para ver si la foto solicitada realmente existe.

{
    name: 'photo',
    path: '/photos/:id',
    meta: {requiresAuth: true},
    component: () => import('@/pages/Photo.vue'),
    beforeEnter: (to, from, next) => {
        const photos = usePhotos();
        const requestedPhoto = photos.$state.photos.findIndex(p => p.uuid === to.params.id)
        return requestedPhoto === -1 ? next({name: 'home'}) : next()
    },
}

En mi ejemplo, ya estoy comprobando en el beforeEnter si la foto solicitada existe. Si todo sale bien, el usuario llega dentro del componente.

En mi componente, estoy buscando de nuevo la foto en la tienda usando la siguiente línea de código:

const photo = photoStore.photos.find(p => p.uuid === route.params.id)

Ahora, TS me informará de que esta foto podría ser indefinida, ya que la operación find podría no devolver resultados, sin embargo, ya sabemos a partir del paso de guardia que esta foto se encontrará.

const photo = photoStore.photos.find(p => p.uuid === route.params.id)
const uuid = photo!.uuid

Podría usar la afirmación de no-nulo de Typescript, pero ESLint no lo permite y me está indicando: “Forbidden non-null assertion.(@typescript-eslint/no-non-null-assertion)”

Entonces, me pregunto, ¿cuál es la mejor práctica para manejar una situación como esta?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como buena práctica, deberías manejar la posibilidad de que la foto sea indefinida en caso de que falle el guardado o si hay un error inesperado.

    Una forma de manejar esta situación es utilizando el renderizado condicional en tu componente. Por ejemplo, puedes usar la directiva v-if para mostrar solo el componente de la foto si la variable de la foto está definida:

    <template>
  <div v-if="photo">
    <!-- Renderizar el componente de la foto -->
  </div>
</template>

    Si necesitas acceder a propiedades del objeto foto, también puedes usar una propiedad computada que devuelva el objeto foto solo si está definido:

    import { computed } from 'vue';

export default {
  computed: {
    photo() {
      const photoStore = usePhotoStore();
      const photo = photoStore.photos.find((p) => p.uuid === route.params.id);
      if (!photo) {
        // Manejar el caso en el que la foto es indefinida
        return null;
      }
      return photo;
    },
  },
};

    De esta manera, puedes acceder a propiedades del objeto foto de manera segura sin utilizar el operador de afirmación de no nulo.

    En general, es buena práctica manejar posibles errores en tu código, incluso si estás seguro de que no sucederán en ciertas situaciones. Esto puede prevenir comportamientos inesperados y hacer tu código más robusto.

Comments are closed.