vue，mixins混入

痛点：当我们的项目越来越庞大，项目中的某些组件之间可能会存在一些相似的功能，这就导致了在各个组件中需要编写功能相同的代码段，重复地定义这些相同的属性和方法，导致代码地冗余，还不利于后期代码的维护。

mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins 是一个 js 对象，它可以包含我们组件中 script 项中的任意功能选项，如：data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中，当组件使用 mixins 对象时所有 mixins 对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，并易于后期的代码维护。

需求：购物app有的页面游客可以访问，有的页面需要登录才可以访问，需要判断用户是否登录，没有登录提示去登陆，已登录的话，就啥也不敢，直接放行。这样的代码往往复用性很强。

应用：

 

 loginConfirm .js:

export default {
  // 此处编写的就是 Vue组件实例的 配置项，通过一定语法，可以直接混入到组件内部
  // data methods computed 生命周期函数 ...
  // 注意点：
  // 1. 如果此处 和 组件内，提供了同名的 data 或 methods， 则组件内优先级更高
  // 2. 如果编写了生命周期函数，则mixins中的生命周期函数 和 页面的生命周期函数，
  //    会用数组管理，统一执行
  created () {
    // console.log('嘎嘎')
  },
  data () {
    return {
      title: '标题'
    }
  },
  methods: {
    sayHi () {
      // console.log('你好')
    },
 
    // 根据登录状态，判断是否需要显示登录确认框
    // 1. 如果未登录 => 显示确认框 返回 true
    // 2. 如果已登录 => 啥也不干   返回 false
    loginConfirm () {
      // 判断 token 是否存在
      if (!this.$store.getters.token) {
        // 弹确认框
        this.$dialog.confirm({
          title: '温馨提示',
          message: '此时需要先登录才能继续操作哦',
          confirmButtonText: '去登陆',
          cancelButtonText: '再逛逛'
        })
          .then(() => {
            this.$router.replace({
              path: '/login',
              query: {
                backUrl: this.$route.fullPath
              }
            })
          })
          .catch(() => {})
        return true
      }
      return false
    }
  }
}

  import loginConfirm from '@/mixins/loginConfirm'

mixins属性和name、data同级。 

 
    name: 'paymentIndex',
    mixins: [loginConfirm],

在添加购物车的时候：

      async addCart () {
        if (this.loginConfirm()) {
          return
        }
        // 省略部分逻辑代码
        this.$toast('加入购物车成功')
      },