Last active
February 15, 2020 10:33
-
-
Save hawkapparel/802eb698c20d935775f51302255cd990 to your computer and use it in GitHub Desktop.
Dynamic URL for products, ecommerce in Nuxt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="mi-producto"> | |
{{ product }} | |
</div> | |
</template> | |
<script> | |
import { mapState } from 'vuex'; | |
export default { | |
head () { | |
return { | |
title: `Mi producto` | |
} | |
}, | |
components: { | |
}, | |
async fetch({ $axios, store, params, error }) { | |
try{ | |
//la ruta del api seria de la forma /producto/cocina-de-gas | |
let product = await $axios.$get(`/producto/${params.p_slug}`); | |
//aca estoy usando un modulo de mi store principal llamado product | |
//Esto quiere decir que en mi store tengo un archivo asi /product/single.js y la mutación | |
//con nombre setProduct | |
//Guardo la respuesta de mi API en mi store para usarlo en mi vista del producto | |
store.commit( 'product/single/setProduct', product.data ); | |
}catch(e){ | |
error ({statusCode : 404 , mensaje : 'Existe algun error' }); | |
} | |
}, | |
data(){ | |
return { | |
} | |
},//Aca estoy trayendo mi objeto product que contiene toda la data de mi producto | |
computed: { | |
...mapState({ | |
product: state => state.product.single.product | |
}) | |
}, | |
created(){ | |
}, | |
beforeMount () { | |
}, | |
mounted(){ | |
}, | |
methods: { | |
} | |
} | |
</script> | |
<style lang="scss" scoped> | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment