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 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀4 小时前
html初学者第一天
前端·html
脑袋大大的5 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络6 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘6 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way6 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家7 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689977 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽9 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头9 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github