Vue.js VueX：如何加载外键的数据（微服务体系结构）

在我的项目中，我有美国的产品和订单。每个订单都包含一个产品的id，或者一个带有产品id的数组。它们来自不同的API。如微服务架构

订单的JSON结构：

[
   {
      "orderId": 1,
      "productId": 360
   }
]

order.js

product.js具有相同的结构，但具有一些不同的属性，如标题、名称、价格等：

{
  "id": 2,
  "title_de": "Example T-Shirt",
  "price": 550
}

现在，在我的组件中，我想加载订单的产品属性。最好的做法是什么？这有点复杂，因为在我的组件中，我通过computed属性加载数据。最后，我想要这样的东西：

OrderComponent.vue

---

正如我所研究的，没有办法操纵计算的属性。当然，该示例不起作用，因为在订单中只有productId。

而不是要在装载前使用的装载

在装载开始之前调用：即将第一次调用渲染函数

---

而不是您希望在装载前使用的装载

在装载开始之前调用：即将第一次调用渲染函数

---

如果您想通过最佳实践来实现这一点，并使用clean way dynamic order组件进行构建，请检查以下内容：

首先，我们为调用api调用来获取订单信息注册一个操作调用，我们通过一个变异存储响应，然后通过getter将其公开给我们的组件

在路由器文件中，我们启用props true以获取组件中的orderId，并使用该信息进行api调用，然后构建组件

我希望我回答了你的问题，如果没有，请告诉我。 注意：不要复制粘贴路由器代码，只需获取所需代码并根据需要进行调整即可

存储文件：

ACTIONS:

/* Get Order */
  GetOrder: ({ commit, dispatch }, orderId) => {
    return new Promise((resolve, reject) => {
      axios
        .get(`myapi/${orderId}`)
        .then((response) => {
          commit("SET_ORDER", response.data);
          resolve(response);
        })
    });
  }

MUTATION:
  SET_ORDER: (state, payload) => (state.order = payload)

STATE:
  order: null

GETTER:
  order: (state) => state.order

index.jsrouter

{
    path: 'shop/orders/:orderId',
    name: 'Orders',
    component: AddMyComponentNameHere,
    props: (route) => {
      const orderId = Number.parseInt(route.params.orderId);
      return { orderId }
    }
  }

OrderComponent.vue

---

如果您想通过最佳实践来实现这一点，并使用clean way dynamic order组件进行构建，请检查以下内容：

首先，我们为调用api调用来获取订单信息注册一个操作调用，我们通过一个变异存储响应，然后通过getter将其公开给我们的组件

在路由器文件中，我们启用props true以获取组件中的orderId，并使用该信息进行api调用，然后构建组件

我希望我回答了你的问题，如果没有，请告诉我。 注意：不要复制粘贴路由器代码，只需获取所需代码并根据需要进行调整即可

存储文件：

ACTIONS:

/* Get Order */
  GetOrder: ({ commit, dispatch }, orderId) => {
    return new Promise((resolve, reject) => {
      axios
        .get(`myapi/${orderId}`)
        .then((response) => {
          commit("SET_ORDER", response.data);
          resolve(response);
        })
    });
  }

MUTATION:
  SET_ORDER: (state, payload) => (state.order = payload)

STATE:
  order: null

GETTER:
  order: (state) => state.order

index.jsrouter

{
    path: 'shop/orders/:orderId',
    name: 'Orders',
    component: AddMyComponentNameHere,
    props: (route) => {
      const orderId = Number.parseInt(route.params.orderId);
      return { orderId }
    }
  }

OrderComponent.vue

---

我认为这是一个逻辑错误。如果您在订单页面中表示订单，则必须获取相关产品数据以填充您的商店。但是你可以懒洋洋地做这件事

<template>
  <div v-if="currentOrder">
    {{ currentOrder.product.title }} <!-- UNDEFINED -->
    {{ currentOrder.product.price }} <!-- UNDEFINED -->
  </div>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
  name: "OrderDetail",
  data() {
    return {
      orderId: this.$route.params.id,
    }
  },
  computed: {
    ...mapGetters({
      currentOrder: 'shop/orders/order'
    })
  },
  mounted() {
    this.$store.dispatch('shop/orders/setOrderById', this.orderId);
    // Product check
    const hasNotProduct = !(this.currentOrder && this.currentOrder.product);
    if(hasNotProduct) {
     this.$store.dispatch('some/store/action/fetchProduct', this.orderId)
    }
  }
}
</script>

还有另一个选择。您可以在操作中同时获取订单和产品。但it解决方案会带来性能问题。我希望它能指引你

---

谢谢

我认为有一个逻辑错误。如果您在订单页面中表示订单，则必须获取相关产品数据以填充您的商店。但是你可以懒洋洋地做这件事

<template>
  <div v-if="currentOrder">
    {{ currentOrder.product.title }} <!-- UNDEFINED -->
    {{ currentOrder.product.price }} <!-- UNDEFINED -->
  </div>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
  name: "OrderDetail",
  data() {
    return {
      orderId: this.$route.params.id,
    }
  },
  computed: {
    ...mapGetters({
      currentOrder: 'shop/orders/order'
    })
  },
  mounted() {
    this.$store.dispatch('shop/orders/setOrderById', this.orderId);
    // Product check
    const hasNotProduct = !(this.currentOrder && this.currentOrder.product);
    if(hasNotProduct) {
     this.$store.dispatch('some/store/action/fetchProduct', this.orderId)
    }
  }
}
</script>

还有另一个选择。您可以在操作中同时获取订单和产品。但it解决方案会带来性能问题。我希望它能指引你

---

谢谢

谢谢，但这并不能真正回答我的问题。我的问题不清楚吗？谢谢，但这并不能真正回答我的问题。我的问题不清楚吗？谢谢你的回答，但我认为这并不能完全回答我的问题。获取订单数据已经起作用，但它只包含产品的ID，而不包含例如product.title或product.price，因为它们来自另一个api。问题是我如何连接两者，以便{{order.product.title}}打印订单的productTitle？我更新了我的评论，请检查。我相信这是有道理的，但请告诉我您可能需要的任何信息：嘿！这方面有什么更新吗？谢谢你的回复，但我认为这并不能完全回答我的问题。获取订单数据已经起作用，但它只包含产品的ID，而不包含例如product.title或product.price，因为它们来自另一个api。问题是我如何连接两者，以便{{order.product.title}}打印订单的productTitle？我更新了我的评论，请检查。我相信这是有道理的，但请告诉我您可能需要的任何信息：嘿！这方面有什么更新吗？这有点复杂，因为在我的组件中，我是通过computed属性加载数据的-computed属性应该不知道订单数据是如何获得的，这应该是Vuex操作的工作。为什么不在setOrderById内获取产品？如果您的问题是关于如何构造状态，那么您应该为orderAndProductDetails设置单独的状态，这些属性用于操作填充的视图currentOrder.product.price。这有点复杂，因为在我的组件中 nts我通过computed属性加载数据-computed属性应该不知道订单数据是如何获得的，这应该是Vuex操作的任务。为什么不在setOrderById内获取产品？如果您的问题是关于如何构造状态的，那么您应该为orderAndProductDetails设置单独的状态，并在操作填写的currentOrder.product.price视图中使用这些属性。

    computed:{return this.$store.getters.products},
 mounted() {
        this.$store.dispatch('shop/orders/', this.orderId).then(()=> this.order = this.products.find(product => product.id === this.order.productId); )
      },
data() {
    return {
      myProduct: null
}
}

  <template>
      <div v-if="order">
        {{ order.product.title }}
        {{ order.product.price }}
      </div>
    </template>

<template>
  <div v-if="currentOrder">
    {{ currentOrder.product.title }} <!-- UNDEFINED -->
    {{ currentOrder.product.price }} <!-- UNDEFINED -->
  </div>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
  name: "OrderDetail",
  data() {
    return {
      orderId: this.$route.params.id,
    }
  },
  computed: {
    ...mapGetters({
      currentOrder: 'shop/orders/order'
    })
  },
  mounted() {
    this.$store.dispatch('shop/orders/setOrderById', this.orderId);
    // Product check
    const hasNotProduct = !(this.currentOrder && this.currentOrder.product);
    if(hasNotProduct) {
     this.$store.dispatch('some/store/action/fetchProduct', this.orderId)
    }
  }
}
</script>

fetchProductByOrderId({commit, dispatch}, orderId) {
  //fetchProduct By OrderId
  // dispatch action to merge product data and order data if your backend supported.
}