Composition API 사용 예제 고려(다중 선택 상태 관리)

개시하다

Vue3부터 Composition API를 사용할 수 있게 되면서 사용법에 대한 기사도 늘었다.Composition API를 사용하여 어셈블리에서 논리를 분리하면 재활용이 용이하다는 장점이 있습니다.
https://qiita.com/karamage/items/7721c8cac149d60d4c4a
단지 의문이 하나 있을 뿐이다.그렇게 바꾸고 싶은 질문이 있나요?

공통화가 가능하다고 하지만 코드가 너무 작아서 매번 쓰기가 비교적 빠르다

카운터 또는

외관과 논리를 구성 요소로 통합하는 속도 향상

복잡한 입력 형식이나 (submit 단추를 포함하는 구성 요소라면 모 구성 요소의 선명도)

기본보다 논리가 무거운 패턴이 아니면 효과를 발휘할 수 없기 때문에 좋은 예를 찾기 어렵다.
그럼에도 불구하고 나는 좋은 예가 있는지 생각해서 하나의 예를 생각해냈다.
그것은 여러 가지 선택된 상태 관리입니다. (저장, 취소)
여러 가지 선택만 한다면 복선상자는 문제없지만 편집 상태라면 다음과 같은 정보가 필요하기 때문에 곧 복잡해진다.

선택한 ID 목록

추가할 ID 목록

삭제할 ID 목록

복수 선택이 한 화면에 여러 번 나올 수 있는데 공통화를 잘 이룰 수 있다면 좋겠다.
그래서 나는 이것을 예로 삼아 실장을 했다.CodePen에 업로드되었으므로 자세한 설치 작업과 설치를 확인하려면 여기를 참조하십시오.
또한 문장의 설명은 평소 사용하던 SFC로 작성되며, 코드포엔에서 작성한 것과 다르니 주의하시기 바랍니다.SFC와 비 SFC의 쓰기 방법은 다릅니다. 여기를 참고하십시오.
https://qiita.com/wintyo/items/b43bede2b0b43c7ab31f

설치 내용

MultiSelection 구성 요소 생성

먼저 여러 선택 상태를 표시하는 어셈블리를 생성합니다.
selectedIds,selectingIds, deleteIds를 교부하여 선택, 선택 중, 삭제를 표시합니다.
구현 방법은 객체의 Id가 어디에 포함되었는지 간단히 점검한 후 선택하는 것으로, 선택 과정에서 예정된 범주를 삭제한다는 의미로 추가됩니다.클릭한 대상의 옵션을 이벤트를 통해 보냅니다.

다음 데이터가 있을 때의 표시 내용

selectedIds: ['A', 'B']

selectingIds: ['C']

deleteIds: ['B']

MultiSelection.vue

<template lang="pug">
  .multi-selection
    template(v-for="option in cmpOptions")
      .multi-selection__item(
        :class="{\
          '-selected': option.isSelected,\
          '-selecting': option.isSelecting,\
          '-delete': option.isDelete,\
        }"
        @click="onClick(option)"
      )
        | {{ option.text }}
</template>

<script>
export default {
  emits: {
    select: (option) => {
      return option != null;
    },
  },
  props: {
    selectedIds: { type: Array },
    selectingIds: { type: Array },
    deleteIds: { type: Array },
    options: { type: Array },
  },
  setup(props, context) {
    const cmpOptions = computed(() => {
      return props.options.map((option) => {
        const isSelected = props.selectedIds.includes(option.id);
        const isSelecting = props.selectingIds.includes(option.id);
        const isDelete = props.deleteIds.includes(option.id);
        return {
          ...option,
          isSelected: !isDelete && isSelected,
          isSelecting,
          isDelete,
        };  
      });
    });
    
    return {
      cmpOptions,
      onClick: (option) => {
        context.emit('select', option);
      },
    };
  },
};
</script>

<style lang="scss">
// cssは割愛します。詳細はcodepenの方をご参照ください
</style>

다중 선택 상태 관리를 위한compoosable 만들기

그리고 여러 선택 상태를 관리하는 데 사용되는compoosable 함수를 만듭니다.어렵기 때문에 초기 선택 상태를 매개 변수로 전달할 수 있습니다.처리에 관해서는 선택할 때, 취소할 때, 확정할 때 각각 selectedIds, selectingIds, deleteIds를 업데이트합니다.
useMultiSelection.js

function useMultiSelection(initialSelectedIds = []) {
  const state = reactive({
    selectedIds: initialSelectedIds,
    selectingIds: [],
    deleteIds: [],
  });

  return {
    state,
    onSelect: (option) => {
      {
        // 選択中の場合は選択を外す
        const index = state.selectingIds.findIndex((id) => id === option.id);
        if (index !== -1) {
          state.selectingIds.splice(index, 1);
          return;
        }
      }

      {
        // 削除中の場合は削除リストから外す
        const index = state.deleteIds.findIndex((id) => id === option.id);
        if (index !== -1) {
          state.deleteIds.splice(index, 1);
          return;
        }
      }

      {
        // 選択済みの項目なら削除リストに追加する
        const index = state.selectedIds.findIndex((id) => id === option.id);
        if (index !== -1) {
          state.deleteIds.push(option.id);
          return;
        }
      }

      // それ以外は選択中として登録
      state.selectingIds.push(option.id);
    },
    onCancel: () => {
      state.selectingIds = [];
      state.deleteIds = [];
    },
    onConfirm: () => {
      const addedIds = _.union(state.selectedIds, state.selectingIds);
      const excludedIds = _.difference(addedIds, state.deleteIds);
      state.selectedIds = excludedIds;
      state.selectingIds = [];
      state.deleteIds = [];
    },
  };  
}

애플리케이션 통합

위에서 만든 걸로 잘 협력하면 완성이야.
App.vue

<template lang="pug">
  div
    .block
      .block__title MultiSelection1
      .block__content
        div
          button(@click="multiSelection.onCancel") cancel
          button(@click="multiSelection.onConfirm") confirm
        MultiSelection(
          :selectedIds="multiSelection.state.selectedIds"
          :selectingIds="multiSelection.state.selectingIds"
          :deleteIds="multiSelection.state.deleteIds"
          :options="OPTIONS"
          @select="multiSelection.onSelect"
        )
        div selectedIds: {{ multiSelection.state.selectedIds }}
        div selectingIds: {{ multiSelection.state.selectingIds }}
        div deleteIds: {{ multiSelection.state.deleteIds }}
</template>

<script>
const OPTIONS = [
  { id: 'A', text: 'A' },
  { id: 'B', text: 'B' },
  { id: 'C', text: 'C' },
  { id: 'D', text: 'D' },
  { id: 'E', text: 'E' }
];

export default {
  setup() {
    const multiSelection = useMultiSelection();
    
    return {
      OPTIONS,
      multiSelection,
    };
  },
};
</script>

<style lang="scss">
// cssは割愛します。詳細はcodepenの方をご参照ください
</style>

논리가 모두 useMultiSelection에 포함되어 있기 때문에 복제할 때 이것을 한 번만 더 부르면 된다😄

  setup() {
    const multiSelection = useMultiSelection();
+   // もう一度呼び出すだけで同じロジックのものが使える
+   const multiSelection2 = useMultiSelection([OPTIONS[0].id]);
    
    return {
      OPTIONS,
      multiSelection,
+     multiSelection2,
    };
  }

끝맺다

Composition API를 사용한 구현 예입니다.이번 예는 논리가 복잡하고 재사용 가능성이 높아 좋은 예다.
이 기사를 쓸 때 Composition API는 UI가 간단하지만 논리가 복잡한 패턴을 발휘한다고 생각한다.단지 논리가 복잡한 상황에서 기본적으로 모두 백스테이지에서 하는 것이기 때문에 나는 이런 일은 하기 어렵다고 생각한다.따라서 평소 혜택을 즐긴다기보다는 사용 과정에서 이렇게 복잡한 패턴을 만나게 됐다는 논리가 도움이 됐다.
Composition API를 사용하는 예로 참조할 수 있다면 매우 좋습니다.