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时,应当谨慎考虑其是否真的能够提高代码的可维护性和可读性。
相关推荐
十一吖i1 分钟前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年2 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_3 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189115 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾7 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking7 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu9 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym14 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫15 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫19 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js