引言

在現(xiàn)代前端應用中，模態(tài)框(Modal)是最常用的UI組件之一。然而，隨著應用規(guī)模的增長，模態(tài)框的狀態(tài)管理往往會變得混亂。本文將介紹一種基于 Pinia 和 Vue 3 Composition API 的類型安全模態(tài)框管理方案，幫助你優(yōu)雅地處理應用中的各種模態(tài)框狀態(tài)。

核心概念解析

1. Pinia 狀態(tài)管理

Pinia 是 Vuex 的繼任者，也是 Vue3 官方推薦的狀態(tài)管理庫，相比 Vuex 提供了更好的 TypeScript 支持和更簡潔的 API。我們的解決方案將基于 Pinia 來存儲和管理所有模態(tài)框的狀態(tài)。

2. 類型安全的必要性

在大型項目中，確保模態(tài)框狀態(tài)和操作的類型安全可以顯著減少運行時錯誤，并提高開發(fā)效率。我們的方案充分利用 TypeScript 的泛型和類型推斷來實現(xiàn)這一點。

實現(xiàn)詳解

1. 定義模態(tài)框狀態(tài)類型

首先，我們需要定義應用中所有模態(tài)框的狀態(tài)類型：

type BaseModalState = {
  open: boolean;
};

type ModalStates = {
  taskCompleteModal: BaseModalState;
  recConfirmModal: BaseModalState & { tipsText?: string };
};

type ModalKey = keyof ModalStates;

這里我們定義了一個基礎模態(tài)框狀態(tài) BaseModalState，然后通過 ModalStates 類型擴展定義了具體的模態(tài)框類型。

2. 創(chuàng)建 Pinia Store

接下來，我們創(chuàng)建 Pinia store 來管理這些模態(tài)框狀態(tài)：

const useModalStore = defineStore('APP_MODAL_STORE', () => {
  const modals = ref<ModalStates>({
    taskCompleteModal: { open: false },
    recConfirmModal: { open: false, tipsText: '' },
  });

  function updateModal<K extends ModalKey>(
    key: K,
    value: Partial<ModalStates[K]>
  ) {
    modals.value[key] = { ...modals.value[key], ...value };
  }

  return {
    modals,
    updateModal,
  };
});

這個 store 提供了：

• modals: 響應式對象，存儲所有模態(tài)框狀態(tài)
• updateModal: 用于更新特定模態(tài)框狀態(tài)的通用方法

3. 創(chuàng)建便捷的 Composition 函數(shù)

為了更方便地在組件中使用，我們創(chuàng)建了一個 useModal 組合式函數(shù)：

export function useModal<K extends ModalKey>(
  key: K
): {
  state: ComputedRef<ModalStates[K]>;
  update: (payload: Partial<ModalStates[K]>) => void;
} & {
  [P in keyof ModalStates[K]]: ComputedRef<ModalStates[K][P]>;
} {
  const store = useModalStore();
  const state = computed(() => store.modals[key]);

  const result: Record<string, any> = {
    state,
    update: (payload: Partial<ModalStates[K]>) =>
      store.updateModal(key, payload),
  };

  for (const field in state.value) {
    if (Object.prototype.hasOwnProperty.call(state.value, field)) {
      result[field] = computed(
        () => state.value[field as keyof ModalStates[K]]
      );
    }
  }

  return result as any;
}

這個函數(shù)為每個模態(tài)框狀態(tài)屬性生成了計算屬性，這一步很重要，使得在組件中可以更方便地訪問和更新狀態(tài)。

使用示例

1. 在組件中使用

<script setup lang="ts">
import { useModal } from './modalStore';

const modal = useModal('taskCompleteModal');

const openModal = () => {
  modal.update({ open: true });
};
</script>

<template>
  <button @click="openModal">打開任務完成模態(tài)框</button>
  <TaskCompleteModal v-model="modal.open" />
</template>

2. 帶有額外屬性的模態(tài)框

<script setup lang="ts">
import { useModal } from './modalStore';

const modal = useModal('recConfirmModal');

const showConfirm = () => {
  modal.update({
    open: true,
    tipsText: '您確定要執(zhí)行此操作嗎？'
  });
};
</script>

<template>
  <button @click="showConfirm">顯示確認對話框</button>
  <ConfirmModal v-model="modal.open" :tips-text="modal.tipsText" />
</template>

方案優(yōu)勢

1. 類型安全：所有模態(tài)框狀態(tài)和操作都有嚴格的類型檢查
2. 集中管理：所有模態(tài)框狀態(tài)集中在一個 store 中，便于維護，也可根據(jù)實際情況拆分出不同的 modal store
3. 使用便捷：useModal 函數(shù)提供了簡潔的 API 來訪問和更新狀態(tài)
4. 響應式：基于 Vue 的響應式系統(tǒng)，狀態(tài)變化自動更新視圖
5. 可擴展：添加新模態(tài)框只需擴展 ModalStates 類型

總結(jié)與延伸

本文介紹的類型安全模態(tài)框管理方案適用于中大型 Vue 項目，特別是那些需要管理多個模態(tài)框狀態(tài)的應用。通過結(jié)合 Pinia 和 TypeScript 的強大功能，我們實現(xiàn)了既安全又易用的解決方案。希望這個方案能幫助你更好地管理 Vue 應用中的模態(tài)框狀態(tài)。如果你有更復雜的需求，可以考慮在此基礎上進一步擴展和完善。