この記事では、Netlifyに展開されたeコマースの例を介して、NUXTアプリケーションで動的ルーティングを作成する方法を示します。これは一般的なシナリオです。APIからデータを取得しますが、これは不明であり、いつでも多數(shù)または変更があります。幸いなことに、Nuxtは動的ルーティングを作成するプロセスを非常にスムーズにします。

始めましょう！

デモサイトGitHubリポジトリ

ページを作成します

この例では、Mockarooを使用していくつかの仮想ストアデータを作成し、靜的フォルダーに保存しました。通常、VuexストアでFetchまたはAxiosとアクションを使用してこのデータを収集します。いずれにせよ、データをstore/index.jsにVuexを使用して保存します。これには、UIステータスと空のカート配列が含まれています。

 「?/static/storedata.json」からデータをインポートする

const state =（）=>（{{
  cartuistatus：「アイドル」、
  保存された：データ、
  カート：[]
}）

NUXTでは、ルートを設定するためにpagesディレクトリに.vueファイルを作成するだけであることに注意する必要があります。したがって、 index.vueページがホームページとして、ショッピングカートなどのcart.vueページがあります。NUXTは、これらのページのすべてのルートを自動的に生成します。

動的ルートを作成するには、これらのページを保存するディレクトリを作成します。この場合、ルートが各製品の詳細ビューを指すため/productsと呼ばれるディレクトリを作成しました。

このディレクトリでは、アンダースコアを備えたページと、ルートの作成に使用したいユニークな識別子を作成します。カート內(nèi)のデータを見ると、次のようになります。

 [
  {
    「ID」：「9D436E98-1DC9-4F21-9587-76D4C0255E33」、
    「色」：「ゴールデンロッド」、
    「説明」：「Mauris Enim Leo、Rhoncus Sed、Vestibulum Sit Amet、Cursus ID、Turpis。IntegerAliquet、Massa Id Lobortis convallis、Tortor Riskus dapibus augue、Vel Accumsan Tellus nisi eu orci。
    「性別」：「男性」、
    「名前」：「デジアダ」、
    「レビュー」：「Productize Virtual Markets」、
    「星空」：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構(gòu)成に通知します

YARNビルドを使用してアプリケーションを構(gòu)築すると、完了ですが、NUXTを使用して、展開用の靜的サイト、この場合はNetlifyで作成します。 Nuxtを使用して靜的サイトを作成するとき、 yarn generateコマンドを使用します。 nuxt.config.jsのgenerateコマンドを使用して、動的ファイルについてnuxtに知らせる必要があります。

このコマンドは、次のような配列に解析された約束を返す関數(shù)を期待します。

デフォルトのエクスポート{
  生成する： {
    ルート：[
      '/product/1'、
      '/product/2'、
      '/product/3'
    ]
  }
}

これを行うには、ファイルの上部に靜的ディレクトリからデータを?qū)毪?、関數(shù)を作成します。

 './static/storedata.json'からデータをインポートする
let dynamicRoutes =（）=> {
  新しい約束を返す（Resolve => {
    Resolve（data.map（el => `product/$ {el.id}`））
  }）
}

次に、構(gòu)成の関數(shù)を呼び出します。

生成する： {
  ルート：DynamicRoutes
}、

Axiosを使用してAPIからデータを収集する場合（より一般的です）、次のようになります。

 「axios」からaxiosをインポートする
let dynamicRoutes =（）=> {
  return axios.get（ 'https：// your-api-here/products'）.then（res => {
    RETURN RES.DATA.MAP（PRODUCT => `/PRODUCT/$ {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>{{ 製品説明 }}</p>

 ...
</main>

この場合、保管中のカートにアイテムを追加する必要があります。アイテムを追加および削除する機能を追加します（ゼロ以下の數(shù)の削減を許可しません）

<p>
  <button> 0 ? quantity-- : quantity = 0"> - </button>
  {{ 量 }}
  <button> </button>
</p>
...
<button>カートに追加</button>

このコンポーネントの方法では、アイテムと新しいフィールド（數(shù)量）を配列に追加します。これは、ストアの変異にペイロードとして渡されます。

方法：{
  cartadd（）{
    let item = this.product;
    item.quantity = this.quantity;
    this.tempcart.push（item）;
    this。$ store.commit（ "addtocart"、item）;
  }
}

Vuexストレージでは、プロジェクトが既に存在するかどうかを確認します。それが存在する場合、數(shù)のみを増やします。存在しない場合は、數(shù)量を含むアイテム全體をカートアレイに追加します。

 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（ペイロード）
}

ストレージ內(nèi)のゲッターを使用して合計を計算できるようになりました。これは最終的にStripe ServerLess関數(shù)に渡されます（これについての別の投稿が近日公開されます！）。 Reduceは多くの値から値を取得するのに非常に優(yōu)れているため、これを使用します。 （私はここに詳細を書きました。

 carttotal：state => {
  if（！state.cart.length）return 0
  return state.cart.reduce（（ac、next）=> ac next.quantity * next.price、0）
}

デモサイトGitHubリポジトリ

それでおしまい！個々の製品ページをセットアップしており、Nuxtはビルド時にすべての個別のルートを生成します。あなたは間違いなく自分のためにnuxtを試してみたいと思うでしょう。 ？

以上がNUXTアプリケーションで動的ルートを作成しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。