Vue2混入(Mixins)实战：5个高效逻辑复用技巧

1. 基础混入使用

创建公用方法混入：

// mixins/common.js
export const commonMixin = {
  methods: {
    formatPrice(price) {
      return '¥' + (price / 100).toFixed(2)
    },
    showToast(message, type = 'success') {
      this.$toast({ message, type })
    }
  }
}

// 组件中使用
import { commonMixin } from '@/mixins/common'

export default {
  mixins: [commonMixin],
  methods: {
    handleAddToCart() {
      this.showToast('商品已加入购物车')
    }
  }
}

2. 生命周期混入

自动页面访问统计：

// mixins/pageTrack.js
export const pageTrackMixin = {
  mounted() {
    this.trackPageView()
  },
  methods: {
    trackPageView() {
      const pageName = this.$route.name || document.title
      analytics.track('page_view', { page: pageName })
    }
  }
}

// 页面组件中使用
import { pageTrackMixin } from '@/mixins/pageTrack'

export default {
  mixins: [pageTrackMixin]
}

3. 数据混入

共享基础数据：

// mixins/user.js
export const userMixin = {
  data() {
    return {
      currentUser: null,
      isLogin: false
    }
  },
  created() {
    this.fetchUserInfo()
  },
  methods: {
    async fetchUserInfo() {
      this.currentUser = await getUserInfo()
      this.isLogin = !!this.currentUser
    }
  }
}

// 需要用户信息的组件中使用
import { userMixin } from '@/mixins/user'

export default {
  mixins: [userMixin]
}

4. 选项合并策略

自定义混入合并行为：

// main.js
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  return fromVal || toVal
}

// 混入定义
export const customOptionMixin = {
  myOption: '混入值'
}

// 组件中使用
export default {
  mixins: [customOptionMixin],
  myOption: '组件值',
  created() {
    console.log(this.$options.myOption) // 输出'组件值'
  }
}

5. 全局混入

// main.js
import Vue from 'vue'
import { commonMixin } from './mixins/common'

Vue.mixin(commonMixin)

// 任何组件中都可以使用
export default {
  methods: {
    showProductPrice(product) {
      this.showToast(`价格: ${this.formatPrice(product.price)}`)
    }
  }
}

合理使用混入可以大幅提高Vue2项目的开发效率，特别适合需要跨组件共享逻辑的中大型项目。