Tenía una aplicación Nuxt.js trabajando con la API de opciones. Y con el lanzamiento del nuevo Nuxt3, estaba tratando de migrar las cosas a la alternativa supuestamente "mejor". Hasta ahora no he tenido más que desafíos, tal vez esa es mi falta de conocimiento.
Estoy construyendo una plataforma básica de comercio electrónico con un componente de
# products/_id.vue <template> <div> {{ product }} </div> </template> <script> import { defineComponent, useFetch, useStore, useRoute, ssrRef, reactive, watch } from '@nuxtjs/composition-api' export default defineComponent({ setup () { const store = useStore() const route = useRoute() const loading = ref(false) // LOAD PRODUCT FROM VUEX STORE IF ALREADY LOADED const product = reactive(store.getters['products/loaded'](route.value.params.id)) // GET PAGE CONTENT const { fetch } = useFetch(async () => { loading.value = true await store.dispatch('products/getOne', route.value.params.id) loading.value = false }) // WATCH, if a use navigates to another product, we need to watch for changes to reload watch(route, () => { if (route.value.params.id) { fetch() } }) return { loading product } } }) </script>Una cosa que debo tener en cuenta es que, si el producto recibe un comentario/calificación, quiero que la interfaz de usuario se actualice con la calificación de estrellas del producto, por lo que necesita más reactividad.
Sigo recibiendo una variable de producto undefined
Dentro de mi tienda VueX tengo mis getters
loaded: state => (id) => { try { if (id) { return state.loaded[id] } return state.loaded } catch { return {} } }Buscando instrucciones sobre cómo hacer que esto funcione, mejore cualquiera de los códigos que he configurado actualmente.
Si desea mantener una referencia reactiva a su captador, debe crear una propiedad computada .
Entonces, lo que devuelve de su función de configuración es
product: computed(() => getters['products/loaded'](route.value.params.id))
Esto asegurará que cada vez que se actualice el captador, su componente recibirá esa actualización.
Además, si el producto ya existe, debe abandonar la función de búsqueda. Para que no realice la llamada API adicional.
Y, finalmente, si hay un error, podría redirigir a una página de error 404.
Con todo, su función de configuración podría verse así
setup() { const route = useRoute(); const { error } = useContext(); const { getters, dispatch } = useStore(); const loading = ref(false); const alreadyExistingProduct = getters['products/loaded'](route.value.params.id); const { fetch } = useFetch(async () => { // NEW: bail if we already have the product if (alreadyExistingProduct) return; try { loading.value = true; await dispatch('products/getOne', route.value.params.id); } catch { // NEW: redirect to error page if product could not be loaded error({ statusCode: 404 }); } finally { loading.value = false; } }); watch(route, () => { if (route.value.params.id) { fetch(); } }); return { loading, // NEW: computed property to maintain reactive reference to getter product: computed(() => getters['products/loaded'](route.value.params.id)), }; },Probablemente también te encuentres con este problema inofensivo FYI.