如何通过可组合项重用 Vue.js 中的逻辑

编程时,构建代码库非常重要,以便尽可能重用代码。 复制代码会使代码库膨胀并使调试复杂化,尤其是在较大的应用程序中。

Vue 通过可组合性简化了代码重用。 可组合项是封装逻辑的函数,您可以在项目中重用它们来处理类似的功能。

它总是可组合的吗?

在 Vue 3 引入可组合项之前,您可以使用 mixins 来捕获代码并在应用程序的不同部分中重用它。 Mixins 包含 Vue.js 选项,例如数据、方法和生命周期挂钩,从而实现跨多个组件的代码重用。

要创建 mixin,您可以将它们构建在单独的文件中,然后通过将 mixin 添加到组件选项对象内的 mixins 属性来将它们应用到组件。 例如:

 
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 — 最初设置为空值。

formData 存储表单的输入数据,包括初始化为空的用户名和密码字段。 formErrors 镜像此结构以保存潜在的错误消息,最初也是空的。

mixin 还包含一个方法 validateForm(),用于检查用户名和密码字段是否不为空。 如果任一字段为空,则会使用适当的错误消息填充 formErrors 数据属性。

  体验追逐快感的 10 款最佳狩猎游戏

当 formErrors 为空时,该方法返回 true 表示表单有效。 您可以通过将 mixin 导入到 Vue 组件并将其添加到 Options 对象的 mixin 属性来使用 mixin:

 <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 组件。 mixins 属性包括您导入的所有 mixin。 在这种情况下,组件使用 formValidation mixin 中的 validateForm 方法来通知用户表单提交是否成功。

  2022 年 8 款适合中小企业的最佳财务管理软件

如何使用可组合项

可组合项是一个独立的 JavaScript 文件,具有根据特定问题或要求定制的功能。 您可以在可组合项中利用 Vue 的组合 API,使用引用和计算引用等功能。

通过对组合 API 的访问,您可以创建集成到各种组件中的函数。 这些函数返回一个对象,您可以通过 Composition API 的设置函数轻松将其导入并合并到 Vue 组件中。

在项目的 src 目录中创建一个新的 JavaScript 文件以使用可组合项。 对于较大的项目,请考虑在 src 中组织一个文件夹,并为不同的可组合项创建单独的 JavaScript 文件,确保每个可组合项的名称反映其用途。

在 JavaScript 文件中,定义您需要的函数。 以下是将 formValidation mixin 重构为可组合项:

 
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 非常相似的方法来处理表单验证。 最后,它以对象的形式返回状态变量和 validateForm 函数。

  如何修复 Xbox One 控制器漂移

您可以通过从组件中的文件导入 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

虽然 mixins 在 Vue 2 中对于代码重用很有用,但可组合项在 Vue 3 中已经取代了它们。可组合项提供了一种更加结构化和可维护的方法来重用 Vue.js 应用程序中的逻辑,从而更轻松地使用 Vue 构建可扩展的 Web 应用程序。