vue的mixins

mixins的概念及使用

一，mixins的概念

mixin是vue提供的一种方式来分发vue组件的可复用功能，可以将相同的方法、字段等抽离出来，避免重复定义。混入分为局部混入和全局混入，一个mixin对象可以包含任意组件选项，data、methods、mounted等。
并且它的生命周期函数先执行。

二，使用方法

在今天做微信小程序项目时，为了解决每一个tabbar都需要用到的一个功能，提升代码的整洁和复用性，所以用到了mixins。
首先需要在根目录创建一个名为mixins的文件夹,并在内部创建一个后缀名为.js的>文件
在需要用到的vue页面进行引用 下列是引用的方法

// mixins.js
import { useStore } from 'vuex';

export function useBadgeMixin() {
  const store = useStore();

  const setBadge = () => {
	  if(store.getters.cartLength>0){
		  uni.setTabBarBadge({
		    index: 2,
		    text: store.getters.cartLength + '',
		  });
	  }else{
		  uni.removeTabBarBadge({
		  	index:2
		  })
	  }
    
  };

  // 将 setBadge 方法暴露给其他组件使用
  return {
    setBadge,
  };
}

//setup组合式
import { useBadgeMixin } from '@/mixins/tabbar-badge.js';
import {onShow} from "@dcloudio/uni-app"

const { setBadge } = useBadgeMixin();

onShow(() => {
  setBadge();
});

在小程序中如果想实现分享功能，需要在各个组件中单独写分享方法，如果页面太多的话，非常麻烦。所以可以使用mixin来简化这个流程。

注意点:

1. mixin 中定义的方法和参数在各组件中不共享，即当前组件对mixins的属性的修改，其他也引用了这个mixins的组件不会受影响;

2. mixin中定义的生命周期函数会比引用组件的生命周期先执行, 会和组件中定义的methods,created等选项合并调用;

3. mixin对象里的(components、methods 、computed、data)这些选项，混入组件时选项会被合并，重名冲突时优先采用组件中定义的数据

如果同时引入多个mixin对象, 执行顺序和引入顺序一致;