vue 3+ts 를 이용 하여 관리 배경 을 실현 합 니 다(추가 삭제 검사)

간단 한 관리 배경 은 기본적으로 데이터 의 첨삭 과 수정 이다.주로 목록+form 폼 입 니 다.모든 페이지 의 논 리 는 기본적으로 같다.다른 점 은 각 페이지 가 호출 해 야 할 구체 적 인 API 와 매개 변수 입 니 다.
이전 vue 2 때 가장 쉬 운 방법 은 한 페이지 의 논 리 를 쓴 다음 에 각 페이지 에 직접 복사 하여 API 와 파 라 메 터 를 수정 하면 됩 니 다.고 급 스 러 운 것 은 mixin 함 수 를 이용 하여 재 활용 논 리 를 추출 하고 각 페이지 에 mixin 을 도입 하 는 것 입 니 다.
vue 3 이후 composition API 가 추가 되 었 습 니 다.본 고 는 coposition API 를 이용 하여 재 활용 가능 한 논 리 를 coposition API 에서 추출 하고 ts 를 도입 하여 간단 한 관리 배경 기능 을 실현 하 는 것 이다.
@vue/cli 로 프로젝트 만 들 기
우선@vue/cli 를 최신 버 전 으로 업그레이드 해 야 합 니 다.본문 은 4.5.6 버 전 을 사용한다.

vue create admin
cd admin
npm run serve

create 수 동 으로 Manually selection features 를 선택 하면 대화 형 선택 이 있 습 니 다.router,vuex 등 옵션 을 설치 할 지,빈 칸 은 선택 여 부 를 전환 할 수 있 습 니 다.TypeScript,Router,Vuex,CSS Pre-processors 를 선택 하 십시오.
우 리 는 axios+axios-mock-adapter+mockjs 를 이용 하여 인터페이스 요청,인터페이스 시 뮬 레이 션 및 가짜 데이터 생 성 을 한 다음 에 이 가방 을 설치 합 니 다.

npm install axios
npm install -D axios-mock-adapter mockjs

프로젝트 전체 프레임 워 크
우리 의 프로젝트 에 Header 가 포함 되 어 있다 고 가정 하면 Header 의 역할 은 페이지 를 전환 하 는 것 입 니 다.두 페이지 는 각각 List 와 About 이 고 이 두 페이지 는 모두 간단 한 목록+삭제 와 검 사 를 하 는 작업 입 니 다.
경로
router 에 list 의 경로 정 보 를 추가 해 야 합 니 다.

const routes: Array<RouteRecordRaw> = [
 {
  path: '/',
  name: 'Home',
  component: Home,
 },
 {
  path: '/about',
  name: 'About',
  component: () => { return import(/* webpackChunkName: "about" */ '../views/About.vue'); },
 },
 {
  path: '/list',
  name: 'List',
  component: () => { return import(/* webpackChunkName: "list" */ '../views/List.vue'); },
 },
];

리스트 페이지
우선 리스트 페이지 의 구 조 를 적 으 면 리스트 와 About 의 구조 가 대체로 비슷 하 다.

<template>
  <div class='content_page'>
    <div class='content_body'>
      <div class='content_button'>
        <button class='add primary' @click='addItem' title='  '>  </button>
      </div>
      <div class='content_table'>
        <table>
          <thead>
            <tr>
              <th v-for='item in thead' :key='item'>{{item}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for='(item, index) in list' :key='item.id'>
              <td>
                <span :title='item.id'>{{item.id}}</span>
              </td>
              <td>
                <div v-if='index === currentIndex'>
                  <input
                    v-model='item.name'
                    title='name'
                  />
                </div>
                <span :title='item.name' v-else>{{item.name}}</span>
              </td>
              <td :title='item.sex'>
               <div v-if='index === currentIndex'>
                  <input
                    v-model='item.sex'
                    title='sex'
                  />
                </div>
                <span :title='item.sex' v-else>{{item.sex ? ' ' : ' '}}</span>
              </td>
              <td :title='item.birth'>
               <div v-if='index === currentIndex'>
                  <input
                    v-model='item.birth'
                    title='birth'
                  />
                </div>
                <span :title='item.birth' v-else>{{item.birth}}</span></td>
              <td :title='item.address'>
               <div v-if='index === currentIndex'>
                 <input
                   v-model='item.address'
                   title='birth'
                 />
               </div>
               <span :title='item.address' v-else>{{item.address}}</span>
              </td>
              <td>
                <div v-if='index === currentIndex'>
                  <button
                    class='primary confirm'
                    @click='confirm(item)'
                  >  </button>
                  <button
                    @click='cancel(item)'
                  >  </button>
                </div>
                <span v-else>
                  <span @click='editItem(index)'>
                    edit
                  </span>
                  <span @click='deleteItem(index, item)'>delete</span>
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

그 중에서 addItem,editItem,deleteItem,confirm,cancel 등 몇 가지 방법 을 사 용 했 습 니 다.모든 목록 페이지 의 이 몇 가지 방법 기능 은 똑 같 습 니 다.유일한 차이 점 은 요청 한 API 입 니 다.우 리 는 이 몇 개의 API 를 매개 변수 로 하여 삭제 하고 검사 하 는 방법 을 setup 함수 에 추출 하여 재 활용 할 수 있 습 니 다.다음은 중점 적 인 composition API 로 넘 어 갑 니 다.
composition API 구현

import { ref, onMounted } from 'vue';
import {ItemType, FetchType, DeleteType, AddType, EditType} from '../../types/index';

export const compositionApi = (
 fetchApi: FetchType,
 deleteApi: DeleteType,
 confirmAddApi: AddType,
 confirmEditApi: EditType,
 itemData: ItemType,
) => {
 const currentIndex = ref<number | null>(null);
 const list = ref([{}]);
 const getList = () => {
  fetchApi().then((res: any) => {
   list.value = res.data.list;
  });
 };
 const addItem = () => {
  list.value.unshift(itemData);
  currentIndex.value = 0;
 };
 const editItem = (index: number) => {
  currentIndex.value = index;
 };
 const deleteItem = (index: number, item: ItemType) => {
  deleteApi(item).then(() => {
   list.value.splice(index, 1);
  //  getList();
  });
 };
 const cancel = (item: ItemType) => {
  currentIndex.value = null;
  if (!item.id) {
   list.value.splice(0, 1);
  }
 };
 const confirm = (item: ItemType) => {
  const api = item.id ? confirmEditApi : confirmAddApi;
  api(item).then(() => {
   getList();
   cancel(item);
  });
 };
 onMounted(() => {
  getList();
 });
 return {
  list,
  currentIndex,
  getList,
  addItem,
  editItem,
  deleteItem,
  cancel,
  confirm,
 };
};

export default compositionApi;

다음은 List 와 About 페이지 의 setup 방법 에 도입 하면 된다.

<script lang='ts'>
import axios from 'axios';
import { defineComponent, reactive } from 'vue';
import { compositionApi } from '../components/composables/index';
import {ItemType} from '../types/index';

const ListComponent = defineComponent({
 name: 'List',
 setup() {
  const state = reactive({
   itemData: {
    id: '',
    name: '',
    sex: 0,
    birth: '',
    address: '',
   },
  });
  const fetchApi = () => {
   return axios.get('/users');
  };
  const deleteApi = (item: ItemType) => {
   return axios.post('/users/delete', { id: item.id });
  };
  const confirmAddApi = (item: ItemType) => {
   return axios.post('/users/add', { 
    name: item.name,
    birth: item.birth,
    address: item.address,
   });
  };
  const confirmEditApi = (item: ItemType) => {
   return axios.post('/users/edit', {
    id: item.id,
    name: item.name,
    birth: item.birth,
    address: item.address,
   });
  };
  const localPageData = compositionApi(fetchApi, deleteApi, confirmAddApi, confirmEditApi, state.itemData);
  return {
   state,
   ...localPageData,
  };
 },
 data() {
  return {
   thead: [
    'id',
    'name',
    'sex',
    'birth',
    'address',
    'option',
   ],
  };
 }
});

이렇게 해서 List 페이지 의 논 리 는 기본적으로 완성 되 었 다.마찬가지 로 About 페이지 의 논리 도 완성 되 었 습 니 다.다른 것 은 About 페이지 에서 인터페이스 가 요청 한 주 소 를 변경 하 는 것 입 니 다.
최종 실현 효과

composition API vs Mixin
vue 3 이전에 코드 를 재 활용 하면 보통 mixin 을 사용 하지만 mixin 은 coposition API 의 약점 에 비해 홈 페이지 에서 다음 과 같이 설명 합 니 다.

mixin 은 충돌 하기 쉽다.모든 특성의 속성 이 같은 구성 요소 에 통합 되 기 때문에 property 이름 충돌 과 디 버 깅 을 피하 기 위해 서 는 다른 모든 특성 을 알 아야 한다

4.567917.중용 성 은 유한 하 다.우 리 는 mixin 에 그 어떠한 매개 변 수 를 전달 하여 그의 논 리 를 바 꿀 수 없다.이것 은 추상 적 논리 방면 의 유연성 을 낮 춘 다소스 코드
프로젝트 에 사 용 된 TS 인터페이스의 정의,아 날로 그 데이터 와 인터페이스 요청 본 고 는 구체 적 으로 소개 되 지 않 았 으 며 알 고 싶 으 면 소스 코드 를 볼 수 있 습 니 다.
여기 찍 어 주세요.
vue 3+ts 를 이용 하여 관리 배경(추가 삭제 및 검사)을 실현 하 는 이 글 은 여기까지 소개 되 었 습 니 다.vue 3 TypeScript 관리 배경 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!