如何透過可組合項重複使用 Vue.js 中的邏輯

編程時，建立程式碼庫非常重要，以便盡可能重複使用程式碼。複製程式碼會使程式碼庫膨脹並使調試複雜化，尤其是在較大的應用程式中。

Vue 透過可組合元素促進程式碼的重複使用。這些元素本質上是包含一組特定邏輯的功能，從而允許它們在單個項目中的各個組件中無縫集成，以便解決類似的功能。

它總是可組合的嗎?

在 Vue 3 中引入可組合項目之前，開發人員使用 mixins 來提取可重複使用程式碼並將其應用到整個應用程式中。這些 mixins 包含一系列 Vue.js 配置，包括資料屬性、方法和元件生命週期，促進各種元素之間的廣泛程式碼共用。

為了實作 mixins，通常將它們組織在單獨的檔案中，並透過將它們作為元件的「mixins」屬性的一部分包含在其關聯的選項設定中來將它們合併到元件中。作為說明，請考慮以下程式碼片段:

 // formValidation.js
export const formValidationMixin = {
  data() {
    return {
      formData: {
        username: '',
        password: '',
      },
      formErrors: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    validateForm() {
      this.formErrors = {};
  
      if (!this.formData.username.trim()) {
        this.formErrors.username = 'Username is required.';
      }
  
      if (!this.formData.password.trim()) {
        this.formErrors.password = 'Password is required.';
      }
   
      return Object.keys(this.formErrors).length === 0;
    },
  },
};

此程式碼段展示了用於驗證表單的 mixin 的組成部分。所述mixin包括兩個資料屬性－formData和formErrors－它們最初被指派為null或void值。

稱為「 formData 」的儲存機制負責保存透過 Web 表單提交的訊息，其中包括指定用於使用者名稱和密碼的空白欄位。類似地，變數“formErrors”已創建為具有相同的結構，以適應可能出現的任何可能的錯誤訊息，兩者都在一開始就被初始化為無內容。

mixin 包含一個名為 validateForm() 的方法，用於驗證使用者名稱和密碼輸入欄位是否已填入。如果這些欄位之一恰好為空，則函數將使用適當的錯誤通知填入「formErrors」屬性。

此實作可確保當 formErrors 資料結構中不存在錯誤時，該方法會產生布林值 true。若要在 Vue.js 元件中使用此功能，可以匯入包含reactiveMixin 函數的相關模組，並將其合併為 Options 物件的 mixin 屬性的一部分。這種整合允許元件利用reactiveMixin函數提供的優勢，其中包括自動錯誤檢測以及在輸入值發生變化時與父組件同步。

 <template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="formData.username" />
        <span class="error">{{ formErrors.username }}</span>
      </div>

      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="formData.password" />
        <span class="error">{{ formErrors.password }}</span>
      </div>

      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import { formValidation } from "./formValidation.js";

export default {
  mixins: [formValidation],
  methods: {
    submitForm() {
      if (this.validateForm()) {
        alert("Form submitted successfully!");
      } else {
        alert("Please correct the errors in the form.");
      }
    },
  },
};
</script>

<style>
.error {
  color: red;
}
</style>

在本例中，我們觀察到一個採用 Options 物件策略的 Vue 元件。屬性的混合包含了在給定構造中導入使用的每個 mixin。具體來說，該元件利用從 formValidation mixin 派生的 validateForm 函數，以便通知最終用戶其表單提交的結果；即是否執行成功。

如何使用可組合項

可組合項目是一個獨立的 JavaScript 模組，包含滿足特定需求或目標的自訂功能。它允許透過利用反應變數和計算值等資源，在其範圍內利用 Vue 的 Composition API 的功能。

利用此接入點可以開發與多種元素無縫連接的功能。所述函數產生一個實體，可以透過 Composition API 提供的配置階段輕鬆地將其匯入並同化到 Vue 元件中。

為了在專案中使用可組合元素，需要在專案的「src」目錄中建立一個新的 JavaScript 檔案。如果專案需要更細粒度的組織，可以選擇在「src」目錄中建立一個子資料夾，並為各種可組合元素指定單獨的 JavaScript 檔案。每個可組合項目的指定檔案名稱必須準確代表其預期功能或用途，這一點至關重要。

為了在 JavaScript 中建立用於表單驗證的可重複使用且模組化的元件，有必要先在腳本檔案中定義一個封裝所有相關邏輯和功能的函數。透過以這種方式重構 FormValidation mixin，我們可以在跨多個專案或應用程式實現表單驗證時實現更大的靈活性和易用性。

 // formValidation.js
import { reactive } from 'vue';

export function useFormValidation() {
  const state = reactive({
    formData: {
      username: '',
      password: '',
    },
    formErrors: {
      username: '',
      password: '',
    },
  });

  function validateForm() {
    state.formErrors = {};

    if (!state.formData.username.trim()) {
      state.formErrors.username = 'Username is required.';
    }

    if (!state.formData.password.trim()) {
      state.formErrors.password = 'Password is required.';
    }

    return Object.keys(state.formErrors).length === 0;
  }

  return {
    state,
    validateForm,
  };
}

給定的程式碼片段從 Vue 套件匯入一個反應函數，然後開發一個名為 useFormValidation() 的匯出器，用於管理應用程式內的表單驗證。

程式碼透過定義一個名為「state」的反應變數來繼續，該變數在其範圍內儲存「formData」和「formErrors」屬性。這樣可以在表單提交和初始化期間方便地存取這些值。隨後，程式碼片段應用了與前面提到的 mixin 所展示的高度相似的方法，以管理表單的驗證過程。最終，結果是將“state”變數和“validateForm”函數作為組合實體提供。

將指定文件中的 JavaScript 函數合併到您的元件中可以透過相關文件中的導入過程來實現。

 <template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="state.formData.username" />
        <span class="error">{{ state.formErrors.username }}</span>
      </div>

      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="state.formData.password" />
        <span class="error">{{ state.formErrors.password }}</span>
      </div>

      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script setup>
import { useFormValidation } from "./formValidation.js";
import { ref } from "vue";
const { state, validateForm } = useFormValidation();

const submitForm = () => {
  if (validateForm()) {
    alert("Form submitted successfully!");
  } else {
    alert("Please correct the errors in the form.");
  }
};
</script>

<style>
.error {
  color: red;
}
</style>

在引入useFormValidation功能組件之後，目前的實作繼續解構與所述組件一起匯入的JavaScript物件。此過程允許在應用程式內繼續進行表單驗證過程。程式隨後會附加一個警報，詳細說明成功提交的結果或在評估階段檢測到的任何普遍錯誤。

可組合項目是新的 Mixins

Vue Composables 代表了對 Mixins 的改進，因為它們在 Vue.js 專案中提供了更有組織、更永續的回收功能的方法。這使得開發人員可以利用 Vue 提供的優勢輕鬆創建更大規模的 Web 應用程式。