如何在使用Woocommerce API的同时循环通过Nuxt.js生成路由以允许呈现我的所有页面？

import axios from 'axios';

export default async function ({ store }) {
  const response = await axios.get('https://your-woocommerce-api-url.com/wp-json/wc/v3/products');
  const products = response.data;

  // 将获取到的产品数据存储到Vuex store中
  store.commit('setProducts', products);
}

module.exports = {
  // ...
  plugins: [
    { src: '~/plugins/woocommerce.js', mode: 'client' },
  ],
  // ...
}

export const state = () => ({
  products: [],
});

export const mutations = {
  setProducts(state, products) {
    state.products = products;
  },
};

<template>
  <div>
    <h1>Products</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    products() {
      return this.$store.state.products;
    },
  },
};
</script>