如何在vue中为一条记录只调用一次api？答案

【问题标题】：How to make api call only once for one record in vue?如何在vue中为一条记录只调用一次api？
【发布时间】：2021-07-24 06:33:19
【问题描述】：

当我打开一个员工时我有一个员工列表我在mounted() 中调用一个 API 问题是每次我打开一个组件时它每次都会调用一个 API。我只希望用户打开订单后应用程序不应该发送 API 请求？

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Staff Detail</ion-title>
        <ion-buttons slot="start">
          <ion-back-button
            default-href="/tabs/tab2"
          v-if="staff_model == 'worker'"></ion-back-button>
          <ion-back-button
            default-href="/tabs/tab3"
          v-else></ion-back-button>
        </ion-buttons>
        
      </ion-toolbar>
    </ion-header>
    <ion-content fullscreen>
      <ion-list>
        <!-- <ion-list-header>List Notes</ion-list-header> -->
       
        <ion-item>
          <ion-label>ID</ion-label>
          <ion-note slot="end" color="dark">{{staff?.id}}</ion-note>
        </ion-item>

       <ion-item>
          <ion-label>Name</ion-label>
          <ion-note slot="end" color="dark">{{staff?.name}}</ion-note>
        </ion-item>

        <ion-item>
          <ion-label>Email</ion-label>
          <ion-note slot="end" color="dark">{{staff?.email}}</ion-note>
        </ion-item>
 <ion-item>
          <ion-label>Social Security Number</ion-label>
          <ion-note slot="end" color="dark">{{staff?.social_security_number}}</ion-note>
        </ion-item>

         <ion-item>
          <ion-label>Government ID</ion-label>
          <ion-note slot="end" color="dark">{{staff?.govt_id}}</ion-note>
        </ion-item>
        

        
       
      </ion-list>
    </ion-content>
  </ion-page>
</template>
<script >
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonContent,
  IonList,
  IonNote,
  IonItem,
  IonBackButton,
  IonButtons,

} from "@ionic/vue";
import { useRoute } from "vue-router";
import ApiService from "@/services/api.service";


export default {
  data() {
    return {
      work_order: "",
      staff: "",
      disableStartWorkButton: true,
    };
  },
  setup() {
    const route = useRoute();
 
    const { staff_id } = route.params;
    const { staff_model } = route.params;
    return { staff_id,staff_model };
  },

  components: {
    IonPage,
    IonHeader,
    IonToolbar,
    IonContent,
    IonList,
    IonNote,
    IonItem,
    IonBackButton,
    IonButtons,
  },
  
  methods: {
    getWorkOrderDetail:  function () {

      let workorder = ApiService.get(`/api/gangBoss/staff/${this.staff_id}`).then(
        (response) => {
          this.staff = response.data;
        }
      );
      return workorder;
    },
  
  },
  mounted() {
   this.getWorkOrderDetail();
  
  },
  
 
};
</script>

【问题讨论】：

标签： vue.js axios vuejs3

【解决方案1】：

最不显眼的方法是让您的 API 服务返回缓存的响应。

看看这个solution。

【讨论】：

【解决方案2】：

您可以使用 localstorage 或 cookie 来存储数据并在发送另一个请求之前检查结果是否存在。

将您的代码更改为：

components: {
    IonPage,
    IonHeader,
    IonToolbar,
    IonContent,
    IonList,
    IonNote,
    IonItem,
    IonBackButton,
    IonButtons,
  },
  
  methods: {
    getWorkOrderDetail:  function () {

      let workorder = ApiService.get(`/api/gangBoss/staff/${this.staff_id}`).then(
        (response) => {
          this.staff = response.data;
          cookie.set('staff',{data: response.data});
        }
      );
      return workorder;
    },
  
  },
  mounted() {
   let staff = cookie.get('staff') ? cookie.get('staff'): { data: [] };
   if(staff.data.length > 0){
      this.staff = staff.data;
   }
   else{
      this.getWorkOrderDetail();
   }
  },
  
 
};
</script>

【讨论】：