NUXTアプリケーションで動的ルートを作成します

この記事では、Netlifyに展開されたeコマースの例を介して、NUXTアプリケーションで動的ルーティングを作成する方法を示します。これは一般的なシナリオです。APIからデータを取得しますが、これは不明であり、いつでも多数または変更があります。幸いなことに、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と呼ばれるディレクトリを作成しました。

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

 [
  {
    「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構成に通知します

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

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

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

これを行うには、ファイルの上部に静的ディレクトリからデータを導入し、関数を作成します。

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

次に、構成の関数を呼び出します。

生成する： {
  ルート：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/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="NUXTアプリケーションで動的ルートを作成します"><h1 id="product-name"> {{product.name}}</h1>
  <h4 id="product-price-ドル">{{product.price |ドル}}</h4>
  <p>{{ 製品説明 }}</p>

 ...
</main>

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

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

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

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

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

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

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

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

デモサイトGitHubリポジトリ

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

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