Erstellen dynamischer Routen in einer Nuxt -Anwendung

In diesem Artikel wird zeigen, wie dynamisches Routing in Nuxt-Anwendungen über ein E-Commerce-Beispiel erstellt wird, das auf Netlify bereitgestellt wird. Dies ist ein häufiges Szenario: Sie erhalten Daten aus der API, die möglicherweise zu jeder Zeit unbekannt, groß oder ändern. Glücklicherweise macht Nuxt das Erstellen dynamischer Routing sehr reibungslos.

Fangen wir an!

Demo Site Github Repository

Erstellen Sie eine Seite

In diesem Beispiel habe ich mit Mockaroo einige virtuelle Speicherdaten erstellt und in einem statischen Ordner gespeichert. Normalerweise verwenden Sie Fetch oder Axios und Aktionen im Vuex -Store, um diese Daten zu sammeln. In jedem Fall speichern wir die Daten in store/index.js mit Vuex, die den UI -Status und ein leeres Wagenarray enthält.

 Daten aus '~/static/lagedata.json' importieren

Export const state = () => ({{
  Cartuistatus: 'Idle',,
  Speichern: Daten, Daten,
  Wagen: []
})

Es ist zu beachten, dass wir in Nuxt nur eine .vue -Datei im Verzeichnis pages erstellen müssen, um die Route festzulegen. Wir haben also eine index.vue -Seite als Homepage, eine cart.vue -Seite als Einkaufswagen usw. Nuxt generiert automatisch alle Routen für uns für diese Seiten.

Um dynamische Routen zu erstellen, erstellen wir ein Verzeichnis, um diese Seiten zu speichern. In diesem Fall habe ich ein Verzeichnis namens /products erstellt, da die Route auf die Detailansicht jedes Produkts verweist.

In diesem Verzeichnis erstelle ich eine Seite mit einem Unterstrich und einer eindeutigen Kennung, mit der ich die Route erstellen möchte. Wenn Sie sich die Daten im Karren ansehen, sieht es so aus:

 [
  {
    "ID": "9D436E98-1DC9-4F21-9587-76D4C0255E33",
    "Farbe": "Goldenrod",
    "Beschreibung": "Mauris enim Leo, Rhoncus sed, vestibulum sitz Amet, Cursus ID, Turpis. Integer Aliquet, Massa Id lobortis convallis, Tortor risikus Dapibus Augue, Vel Accumsan Tellus Nisi Eu Orci. Mauris Lacinia Sapien Sapien Quis libero."
    "Geschlecht": "männlich",
    "Name": "Desi Ada",
    "Review": "Virtuelle Märkte produktieren",
    "Stars": 3,
    "Preis": 50,40,
    "IMG": "1.JPG"
  },
  …
]

Sie können sehen, dass die ID jedes Eintrags eindeutig ist. Dies ist also eine gute Kandidat -Kennung. Wir nennen die Seite:

_id.vue

Jetzt können wir die Routing -Parameter verwenden, um die ID einer bestimmten Seite in den Daten zu speichern:

 Data () {
  zurückkehren {
    ID: this. $ route.params.id,
  }
},

Wenn wir uns die Daten in Devtools ansehen, wird dies sein:

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

Wir können es jetzt verwenden, um alle anderen Informationen zu diesem Eintrag aus dem Speicher abzurufen. Ich werde mapState verwenden:

 import {mapState} aus "vuex";

berechnet: {
  ... MapState (["Storedata"]),
  product () {
    return this.Storedata.find (el => el.id === this.id);
  }
},

Wir filtern storedata um Einträge mit einzigartigen IDs zu finden!

Benachrichtigen Sie die Nuxt -Konfiguration

Wenn wir die Anwendung mit dem Garnbau erstellen, sind wir fertig, aber wir verwenden Nuxt, um eine statische Site für die Bereitstellung zu erstellen, in diesem Fall auf Netlify. Wenn wir eine statische Site mit Nuxt erstellen, verwenden wir yarn generate . Wir müssen den Befehl generate in nuxt.config.js generieren, um Nuxt über dynamische Dateien zu informieren.

Dieser Befehl erwartet eine Funktion, die ein Versprechen zurückgibt, das in ein Array wie dieses analysiert wird:

 Standard ausführen {
  generieren: {
    Routen: [
      '/produkt/1',
      '/produkt/2',
      '/produkt/3'
    ]
  }
}

Dazu werden wir Daten aus einem statischen Verzeichnis oben in der Datei einführen und die Funktion erstellen:

 Daten von './static/storedata.json' importieren '
Lassen Sie Dynamicroutes = () => {
  Neues Versprechen zurückgeben (Resolve => {
    Resolve (data.map (el => `product/$ {el.id}`)))
  })
}

Wir werden dann die Funktion in der Konfiguration aufrufen:

 generieren: {
  Routen: Dynamicroutes
},

Wenn Sie Axios verwenden, um Daten aus der API zu sammeln (was häufiger ist), sieht dies eher so aus:

 Importieren Sie Axios aus 'Axios'
Lassen Sie Dynamicroutes = () => {
  return axios.get ('https: // your-api-hiere/produkte') .then (res => {
    return res.data.map (product => `/product/$ {product.id}`)
  })
}

Auf diese Weise haben wir das dynamische Routing -Setup abgeschlossen! Wenn Sie den Server herunterfahren und neu starten, sehen Sie das dynamische Routing für jedes Produkt wirksam!

Für den letzten Teil dieses Artikels werden wir weiterhin erklären, wie der Rest der Seite erstellt wurde und wie wir Projekte in den Wagen hinzufügen, da dies möglicherweise auch etwas sein möchte.

Füllen Sie die Seite

Jetzt können wir die Seite mit jedem gewünschten Format bevölkern, da wir über product Eigenschaften auf alle Informationen zugreifen können:

<main><img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Erstellen dynamischer Routen in einer Nuxt -Anwendung"><h1 id="product-name"> {{product.name}}</h1>
  <h4 id="product-price-Dollar">{{product.price | Dollar}}</h4>
  <p>{{product.description}}</p>

 ...
</main>

In diesem Fall möchten wir den Artikel auch dem Warenkorb im Speicher hinzufügen. Wir werden die Möglichkeit hinzufügen, Elemente hinzuzufügen und zu löschen (ohne die Reduzierung der Zahl unter Null zuzulassen).

<p>
  <button> 0 ? quantity-- : quantity = 0">- -</button>
  {{ Menge }}
  <button> </button>
</p>
...
<button>in den Warenkorb legen</button>

In der Methode dieser Komponente fügen wir das Element plus ein neues Feld (Menge) zu einem Array hinzu, das wir als Nutzlast zur Mutation im Geschäft übergeben.

 Methoden: {
  cartadd () {
    lass item = this.Product;
    item.quantity = this.quantity;
    this.tempcart.push (item);
    this. $ store.commit ("addtocart", item);
  }
}

Im Vuex -Speicher werden wir überprüfen, ob das Projekt bereits vorhanden ist. Wenn es existiert, erhöhen wir die Zahl nur. Wenn es nicht existiert, werden wir das gesamte Element hinzufügen, das die Menge dem Cart -Array enthält.

 AddtoCart: (Status, Nutzlast) => {
  lass itemFound = false
  state.cart.foreach (el => {
    if (el.id === payload.id) {
      El.quantity = payload.quantity
      itemFound = true
    }
  })
  if (! itemFound) state.cart.push (Nutzlast)
}

Wir können jetzt Getter im Speicher verwenden, um die Gesamtsumme zu berechnen, die schließlich an unsere serverlose Stripe -Funktion übergeben wird (ein weiterer Beitrag dazu kommt in Kürze!). Wir werden dafür reduziert, da Reduzierung sehr gut darin ist, einen Wert aus vielen Werten abzurufen. (Ich habe hier mehr Details darüber geschrieben, wie Reduzierung funktioniert).

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

Demo Site Github Repository

Das war's! Wir haben einzelne Produktseiten eingerichtet und Nuxt generiert alle individuellen Routen für uns zum Bauzeit. Sie werden auf jeden Fall Nuxt selbst versuchen wollen. ?

Das obige ist der detaillierte Inhalt vonErstellen dynamischer Routen in einer Nuxt -Anwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!