vue의 봉인 여러 구성 요소가 같은 인터페이스를 호출하는 사례

배경: 프로젝트에 여러 개의 구성 요소가 같은 인터페이스를 호출하여 코드의 유지보수성을 높이기 위해 공공 방법을 봉인해야 한다
직접 리턴 인터페이스 호출 결과

export function getAll() {
  let all = [];
  let opt = {
  method: 'get',
  url: 'all/teacher',
  success: res => {
   all = res.data.value || [];
  },
  fail: err => {
   tipInfo(err.data.desc, ' ', false, 'warning');
  }
  };
     $http(opt);
  return all;
 }
 console.log(getAll()); // []

$http는 axios 기반으로 봉인된 비동기적인 방법이기 때문에 구성 요소에서 getall () 방법을 호출하여 공수 그룹을 가져옵니다.
promise를 사용하여 봉인

   export function getAll() {
  return new Promise((resolve, reject) => {
  let opt = {
   method: 'get',
   url: 'all/teacher',
   success: res => {
   resolve(res.data.value || []);
   },
   fail: err => {
   reject(err.data.desc);
   }
  };
  $http(opt);
  });
 }
 //  
 getAll()
  .then(data => {
  console.log(data); // 
  })
  .catch(err => {
  this.tipInfo(err.data.desc, ' ', false, 'warning');
  });

promise를 사용하여 봉인한 후 방법은 간결하지 않아 최적화된 목적에 도달하지 못한다
리셋 함수를 사용하여 봉인

  export function getAll(callback) {
   let opt = {
  method: 'get',
  url: 'all/teacher',
  success: res => {
   callback(res.data.value || []);
  },
  fail: err => {
   tipInfo(err.data.desc, ' ', false, 'warning');
  }
  };
  $http(opt);
 }
  //  
  getAllPark(data => {
   console.log(data); //  
  });

보충 지식: vue 여러 페이지가 같은 인터페이스에 사용되는 데이터(예를 들어 이름 목록), vuex 사용
첫 번째: 인터페이스 부전 매개 변수
1. store 폴더 아래의 modules 폴더 아래에 getName을 새로 만듭니다.js

// getName.js
import { getNameList } from "@/apis/apis";  //  

export default {
 state: {
  nameList: [] //  
 },
 mutations: {
  changeNameList(state, payload) {
   state.nameList= payload;
  }
 },
 actions: {
  geName(context) {
   getNameList ({}).then(res => {
    if (res.code == 0) {
     context.commit("changeNameList", res.data);
    } else {
     Message.error(res.message);
    }
   });
  }
 }
};

2、store 폴더에서 index.js에 getName을 도입합니다.js

import getNamefrom "./modules/getName";
export default new Vuex.Store({
 modules: {
   getName
 },
});

3. 전체 프로젝트가 처음 불러올 때dispatch로 나누어 줍니다. 그러면 어느 페이지에서 사용해도 사용할 수 있습니다.
예를 들어 페이지의 첫 페이지를 열 때 mounted에서 dispatch에서 geName 함수를 터치합니다Name

<script>
export default {
 mounted() {
  this.$store.dispatch('geName')
 },
}

4. 만약에 여러 페이지에서nameList를 사용해야 한다면 한 페이지에서 사용하는 것을 예로 들면 나머지 페이지와 같이 사용한다

<template>
 <div>
   <el-select v-model="form.name" placeholder=" " clearable>
    <el-option v-for="item in nameList" :key="item.id" :label="item.fieldName" :value="item.fieldName"></el-option>
   </el-select>
 </div>
</template>    
    
<script>
export default {
 computed: {
  nameList() {
   return this.$store.state.getName.nameList
  }
 },
}
</script>

두 번째: 인터페이스 매개 변수 조정

import movieService from '../services/movieService.js'

export default {
  namespaced: true,
  state: {
    current: 1,
    pageSize: 2,
    total: 0,
    datas: [],
    isLoading: false
  },
  mutations: { //    
    setState(state, newState) {
      for (const prop in newState) {
        state[prop] = newState[prop]
      }
    }
  },
  actions: {
    fetch(context) { //  ， 
      context.commit("setState", { isLoading: true })   
      movieService.getMovies(context.state.current, context.state.pageSize).then(resp => {
        console.log(resp)
        context.commit("setState", resp)
        context.commit("setState", { isLoading: false })
      })
    }
  }
}

//   movieService.js
export default {
  async getMovies(page, pageSize) {
    const datas = await fetch("https://api.myjson.com/bins/15f8x1")
      .then(resp => resp.json())
    return {
      total: datas.length,
      datas: datas.slice((page - 1) * pageSize, page * pageSize) // 
    }
  },
  // id 
  async getMovie(id) {
    const datas = await fetch("https://api.myjson.com/bins/15f8x1")
      .then(resp => resp.json())
    return datas.find(item => item._id === id)
  }
}

페이지에서 사용:

 mounted() { // 
    this.$store.dispatch("movie/fetch") // vuex movie.js action， 
 },

상기 vue의 봉인 여러 개의 구성 요소가 같은 인터페이스를 호출하는 사례는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.