? ??? NetLify? ?? ? ?? ??? ??? ?? NUXT ?? ?????? ?? ???? ??? ??? ?????. ??? ???? ???????. API?? ???? ????. ??? NUXT? ?? ???? ?? ???? ????.

?????!

?? ??? github ???

???? ????

? ???? Mockaroo? ???? ?? ?? ???? ??? ?? ??? ??????. ????? Vuex ????? Fetch ?? Axios ? ??? ?? ??? ???? ?????. ?? ???, ??? UI ??? ? ?? ???? ?? ? vuex? ?? store/index.js ? ???? ?????.

 '~/static/storedata.json'?? ??? ?? ??

???? const state = () => ({{
  Cartuistatus : '??',
  storedata : ???,
  ?? : []
})

NUXT??? ??? ????? pages ????? .vue ?? ? ???????. ??? index.vue ???? ????, cart.vue .

?? ??? ????? ???? ???? ????? ????. ? ?? ??? ? ??? ?? ????? ???? ??? /products ??? ????? ??????.

? ??????? ????? ???? ??? ??? ?? ????? ?? ???? ????. ??? ???? ?? ??? ????.

 [? ?
  {
    "ID": "9D436E98-1DC9-4F21-9587-76D4C0255E33",
    "??": "????",
    "??": "Mauris Enim Leo, Rhoncus SED, Vestibulum Sit Amet, Cursus ID, Turpis. ?? ???, Massa Id Lobortis convallis, ?? Riskus dapibus augue, Vel ac
    "??": "??",
    "??": "Desi Ada",
    "??": "??? ?? ??",
    "??": 3,
    "??": 50.40,
    "IMG": "1.jpg"
  },
  …
]]

? ??? ID? ????? ?? ? ? ???? ?? ?? ?????? ???? ?????.

_id.vue

?? ??? ?? ??? ???? ???? ?? ???? ID? ??? ? ????.

 ??? () {
  ?? {
    ID : this. $ route.params.id,
  }
},

?? ??? ?? DevTools? ???? ?? ??? ????.

 ID : "9D436E98-1DC9-4F21-9587-76D4C0255E33"

??? ??? ?? ?? ?? ??? ?????? ?? ? ? ????. ?? mapState ??????? :

 "vuex"?? {mapstate} ?? ??;

?? : {
  ... MapState ([ "Storedata"]),
  ??() {
    ? this.storedata.find (el => el.id === this.id);
  }
},

??? ?? ? ID??? ??? ?? ?? storedata ????? ????!

NUXT ??? ????

Yarn ??? ???? ?? ????? ???? ?????? NUXT? ???? ????? ?? ???? ?????. nuxt? ???? ?? ???? ?? ? yarn generate ??? ?????. nuxt.config.js ?? generate ??? ???? Nuxt? ?? ??? ?? ??????.

? ??? ??? ?? ??? ?? ?? ? ??? ?? ? ??? ?????.

 ???? ??? {
  ????: {
    ?? : [
      '/product/1',
      '/product/2',
      '/??/3'
    ]]
  }
}

?? ?? ?? ??? ?? ?????? ???? ???? ??? ????.

 './static/storedata.json'?? ??? ?? ??
DynamicRoutes = () => {
  ??? ??? ????? (resolve => {
    Resolve (data.map (el =>`product/$ {el.id}`)))
  })
}

?? ?? ???? ??? ?????.

 ????: {
  ?? : Dynamicroutes
},

AXIOS? ???? API?? ???? ???? ?? (? ?????) ??? ????.

 'axios'?? axios ?? ??
DynamicRoutes = () => {
  return axios.get ( 'https : // your-api-here/products'). (res => {
    return res.data.map (product =>`/upbultion/$ {product.id}`)
  })
}

?? ???, ??? ?? ??? ??? ??????! ??? ???? ?? ???? ? ??? ?? ???? ?????!

? ??? ??? ????? ???? ??? ??? ??? ??????, ??? ????? ???? ??? ?? ?? ? ????.

???? ?????

?? product ?? ??? ?? ?? ??? ??? ? ? ?? ??? ??? ???? ???? ?? ? ????.

<main><img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="NUXT ?? ?????? ?? ?? ??"><h1> {{product.name}}</h1>
  <h4>{{product.price | ??}}</h4>
  <p>{{product.description}}</p>

 ...
</main>

? ?? ????? ??? ??? ????????. ??? ???? ???? ??? ????? (0 ??? ??? ??? ??? ?).

<p>
  <button> 0 ? quantity-- : quantity = 0">-</button>
  {{ ?? }}
  <button> </button>
</p>
...
<button>??? ??????</button>

? ?? ??? ????, ??? ??? ??? ?? (??)? ??? ???? ??? ????? ????? ?????.

 ?? : {
  cartadd () {
    ?? = this.product? ??.
    item.quantity = this.quantity;
    this.tempcart.push (??);
    ?. $ store.commit ( "addtocart", Item);
  }
}

Vuex Storage??? ????? ?? ????? ?????. ???? ?? ? ?? ????. ???? ??? ??? ?? ? ?? ??? ?? ???? ?????.

 AddTocart : (state, payload) => {
  itemfound = false? ????
  state.cart.foreach (el => {
    if (el.id === payload.id) {
      el.quantity = payload.quantity
      ItemFound = true
    }
  })
  if (! itemfound) state.cart.push (????)
}

??? ?? ????? getters? ???? ??? ??? ? ???, ?? Stripe Serverless ???? ????? (??? ?? ? ?? ???? ? ?? ? ?????!). ??? ??? ?? ??? ?? ???? ? ?? ???? ??? ??? ??? ????. (?? ??? ???? ??? ?? ??? ??? ??? ????)).

 carttotal : state => {
  if (! state.cart.length) ?? 0
  return state.cart.reduce ((ac, next) => ac next.quantity * next.price, 0)
}

?? ??? github ???

?? ??! ??? ?? ?? ???? ????? nuxt? ?? ??? ?? ?? ??? ?????. ??? ??? ??? nuxt? ???? ?? ????. ?

? ??? NUXT ?? ?????? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!