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时,应当谨慎考虑其是否真的能够提高代码的可维护性和可读性。
相关推荐
come1123412 分钟前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志34 分钟前
TypeScript结构化类型初探
javascript
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘1 小时前
js代码09
开发语言·javascript·ecmascript
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js