vue.js - VueX：如何加载外键的数据（微服务架构）

Question

在我的项目中，我有状态products和orders. 每个订单都包含一个产品的 ID，或者一个带有产品 ID 的数组。它们来自不同的 API。（如微服务架构）

订单的 JSON 结构：

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

order.js

export const state = () => ({
  order: {}
})

export const getters = {
  order: state => state.allOrder,
}

export const mutations = {
  async setOrderById(state, order) {
     state.order = order;
  }

export const actions = {
  async setOrderById(state, orderId) {
    const order = await this.$axios.get(api + orderId);
    state.commit('setOrderById', client.data);
  }

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

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

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

订单组件.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)
  }
}
</script>

正如我研究的那样，没有办法操纵计算的属性。当然这个例子是行不通的，因为在一个订单中只有 productId。

标签： vue.jsnuxt.jsvuexcomputed-properties

Answer 1

如果您想使用最佳实践来实现这一点并使用干净的方式动态订单组件进行构建，请检查以下内容：

首先，我们为调用 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.js（路由器）

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

订单组件.vue

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

props: {
    orderId: {
      required: true,
      type: Object,
    }
},

mounted() {
    this.$store.dispatch('shop/orders/', this.orderId)
  },
order() {
      return this.$store.getters.order;
    },

更新 我假设您已经在产品中使用了吸气剂。

api调用完成后，我在列表产品中找到订单的产品ID，当我找到它时，我将它保存到order然后我构建模板。（您将需要调整键命名和可能的任何结构）

    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>