VueX: 외부 키의 데이터를 로드하는 방법(마이크로 서비스 아키텍처)

VueX: 외부 키의 데이터를 로드하는 방법(마이크로 서비스 아키텍처)

내 프로젝트에는 주(州)가 있다.products그리고.orders각 주문에는 제품 ID 또는 제품 ID가 포함된 배열이 포함됩니다.서로 다른 API(MicroService Architecture 등)에서 가져옵니다.

주문의 JSON 구조:

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

order.discloss.discloss를 실행합니다.

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
}

이제 내 컴포넌트에 주문의 제품 속성을 로드하고 싶습니다.어떻게 하면 좋을까요?컴포넌트에서 계산된 속성을 통해 데이터를 로드하기 때문에 좀 복잡합니다.마지막으로 다음과 같은 것을 원합니다.

Order Component(Order Component)표시하다

<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만 있기 때문에 이 예는 동작하지 않습니다.

이것을 베스트 프랙티스로 실장해, 클린 웨이 다이내믹 오더 컴포넌트를 사용해 빌드 하는 경우는, 이하를 확인해 주세요.

먼저 api 호출을 위한 액션 호출을 등록하여 주문 정보를 얻고, 변환을 통해 응답을 저장한 후 getter를 통해 컴포넌트에 노출합니다.

라우터 파일에서는 소품 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.syslog(표준)

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

Order Component(Order Component)표시하다

<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>

mount() 대신 Mount()를 사용합니다.상세내용은 이쪽

마운트가 시작되기 직전에 호출됩니다. 렌더 함수가 처음 호출됩니다.

async beforeMount() {
   await this.$store.dispatch('shop/orders/setOrderById', this.$route.params.id);
}

논리적 오류가 있는 것 같습니다.주문 페이지에 주문을 표시하는 경우 스토어를 채우려면 관련 제품 데이터를 가져와야 합니다.하지만 당신은 이것을 느긋하게 할 수 있다.

<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>

// some / store / action . // //

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

또 다른 선택사항이 있습니다.주문과 제품을 함께 가져올 수 있습니다.그러나 이 솔루션에는 성능 문제가 있습니다.안내가 되길 바랍니다.

고마워요.

언급URL : https://stackoverflow.com/questions/65618499/vuex-how-to-load-the-data-of-a-foreign-key-microservice-architecture