526互联

Vue-mixin 混入处理

发布时间 2023-11-27 23:08:32作者: 自学Java笔记本

概述

再日常开发中，对于组件内部的方法多处存在相同的特点，往往会抽离出一个公共的方法方便调用，但是由于多个组件可能都需要用到这个方法，所以通过mixin混入的方式，将该方法独立抽离出来，方便多个组件的使用。

步骤

  • 再src目录下创建一个mixins
  • 再该目录下创建一个xxxx.js文件
  • 编写对应的js代码
  • 再组件内引入import xxx from '@/mixins/xxx'
  • 再组件js代码中 通过关键字 mixins:[xxxx] 可以混入多个，后面优先级更高

完整演示：
给定义一个弹出，当用户执行某些操作时，需要用户登录才可以执行
image

export default {
  // 此处编写的就是Vue组件实例的配置项，通过一定语法，可以直接混入到组件内部
  // data 、 methods 、 computed 、 声明周期函数... 等
  // 注意点： 如果此处 和 组件内 提供了同名的 data 或 methods，则组件内优先级更高
  // 1.如果此处 和 组件内，提供了同名的 data 或 methods，则组件内优先级更高
  // 2.如果编写了声明周期函数，则mixins中的生命周期函数 和 页面的生命周期函数，会用数组管理
  //    统一执行
  methods: {
    // 根据登录状态，判断是否需要显示登录确认框
    // 1.如果未登录=>显示确认框 返回true
    // 2.如果已登录=> 啥也不干 返回false
    loginConfirm () {
      // 判断 token 是否存在
      // 1.如果token不存在，弹确认框
      // 2.如果token存在，继续请求操作
      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(() => {
            // on cancel
          })
        return true
      }
      return false
    }
  }
}

再组件中导入 loginConfirm.js文件 ，随后通过 mixins:[loginConfirm] 混入该方法
image

image