vue-Mixin-复用代码片段

1. 介绍

在软件开发中,代码复用是一个重要的原则,它可以帮助我们避免重复的代码,提高代码的可维护性和可读性。在Vue.js中,我们可以使用mixins来复用代码片段。Mixin可以包含任何组件选项。当组件使用Mixin时,所有Mixin对象的选项将被混入到该组件的选项中。

2. Mixin的工作原理

Mixin对象可以包含任何组件选项。当组件使用Mixin时,所有Mixin对象的选项将被"混入"该组件本身的选项。这意味着,如果Mixin中的某个选项与组件中的选项具有相同的属性或方法,那么该组件的选项将优先执行。

3. 使用Mixin的优点

  1. 代码复用:mixins允许我们将通用的逻辑抽离出来,重复使用。
  2. 易于维护:将通用逻辑抽离到mixins中,使得组件更简洁,逻辑更清晰。
  3. 灵活性:可以通过混入不同的mixins来为组件添加不同的功能。

4. 使用mixins

首先,我们需要创建一个mixins对象,包含我们想要复用的逻辑。然后,在组件中使用mixins选项来引入mixins。

步骤如下:

  1. 在创建src/mixins/xxx.js 文件;如:src/mixins/loginConfirm.js
js 复制代码
// 创建一个名为`loginConfirm`的mixins对象
export default {
  data() {
    return {
      loading: false
    }
  },
  // 是否需要弹登录确认框
  // (1) 需要,返回 true,并直接弹出登录确认框
  // (2) 不需要,返回 false
  loginConfirm () {
    if (!this.$store.getters.token) {
      this.$dialog.confirm({
        title: '温馨提示',
        message: '此时需要先登录才能继续操作哦',
        confirmButtonText: '去登陆',
        cancelButtonText: '再逛逛'
      })
        .then(() => {
        // 如果希望,跳转到登录 => 登录后能回跳回来,需要在跳转去携带参数 (当前的路径地址)
        // this.$route.fullPath (会包含查询参数)
        this.$router.replace({
          path: '/login',
          query: {
            backUrl: this.$route.fullPath
          }
        })
      })
        .catch(() => {})
      return true
    }
    return false
  }
}
  1. 在需要用到的页面导入,并使用
js 复制代码
<template>
  <div>
    <button @click="loadData">Load Data</button>
    <div v-if="loading">Loading...</div>
  </div>
</template>

<script>
// 1.导入
import loginConfirm from '@/mixins/loginConfirm'

export default {
  // 2.定义
  mixins: [loginConfirm],
  methods: {
		async addCart () {
      // 3.调用mixins中混入的方法
      if (this.loginConfirm()) {
        return
      }
      const { data } = await addCart(this.goodsId, this.addCount, this.detail.skuList[0].goods_sku_id)
      this.cartTotal = data.cartTotal
      this.$toast('加入购物车成功')
      this.showPannel = false
      console.log(this.cartTotal)
    }
}
</script>

5. 注意事项

  1. 合并策略 :当组件和Mixin拥有同名选项时,这些选项将以恰当的方式进行"合并"。例如,两者都包含created钩子时,两者都会执行。但是,如果Mixin中的钩子在执行时有副作用(例如,改变组件的数据),那么这个行为可能会出乎意料。因此,当有冲突的选项时,应当小心处理。
  2. 谨慎使用:虽然Mixin可以提供代码复用的便利性,但是过度使用或者不恰当的使用可能会导致代码结构变得复杂和难以维护。在使用Mixin时,应当谨慎考虑其是否真的能够提高代码的可维护性和可读性。
相关推荐
昔人'4 分钟前
css`min()` 、`max()`、 `clamp()`
前端·css
鹏多多14 分钟前
Vue项目i18n国际化多语言切换方案实践
前端·javascript·vue.js
一只小风华~23 分钟前
Vue: 侦听器(Watch)
前端·javascript·vue.js
JarvanMo24 分钟前
Flutter Debug模式:每个开发者都需要的秘密武器(但大多数人用错了)
前端
GDAL24 分钟前
Knockout.js 备忘录模块详解
javascript·knockout
玲小珑35 分钟前
LangChain.js 完全开发手册(八)Agent 智能代理系统开发
前端·langchain·ai编程
蓝胖子的多啦A梦39 分钟前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
掘金安东尼40 分钟前
前端周刊431期(2025年9月8日–9月14日)
前端·javascript·github
Bear on Toilet1 小时前
继承类模板:函数未在模板定义上下文中声明,只能通过实例化上下文中参数相关的查找找到
开发语言·javascript·c++·算法·继承
风若飞1 小时前
npm ERR! code CERT_HAS_EXPIRED
前端·npm·node.js