uniapp中mixins的使用

mixins 是一个 js 对象，它可以包含我们组件中JS部分的任意功能选项，如：data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中，当组件使用 mixins 对象时所有 mixins 对象都将被混入该组件中。

一、创建mixins 页面

在项目根目录下创建mixins目录，放入一个 tabbar-badge.js

import { mapGetters } from 'vuex'

export default {
    computed: {
        ...mapGetters('m_cart', ['total'])
    },
    onShow() {
        // 第一次打开页面就显示 tabber 的上标
        this.setBadge()
    },
    methods: {
        setBadge() {
            uni.setTabBarBadge({
                //第三个tabber的上标
                index: 2,
                // tabber的上标只能是字符串
                text: this.total + ''
            })
        }
    }
}

二、在页面中引用 mixins

使用时只需要导入页面，然后挂载 mixins 为组件

    import badgeMix from '@/mixins/tabbar-badge.js'
    export default {
        mixins: [badgeMix],
        data() {
            return {
            };
        }
    }

三、注意点

1、引用 mixins 的页面如果改变 mixins 的数据，只会在当前页面生效，不会影响到其它引用 mixins 的页面

2、值为对象(components、methods 、computed、data)时，如果当前页面和 mixins 存在同名，则页面中的(components、methods 、computed、data)​​​​​​​覆盖 mixins 中相同的对象

3、值为钩子函数(created、mounted)时，则 mixins 中的钩子函数先调用，当前页面中后调用

4、当 mixins 里面包含异步请求函数，如果想在页面中获取结果，需要返回异步函数，不能只返回结果

四、和vuex的区别

vuex： 用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，修改变量会影响所有引用的组件
Mixins： 可以定义共用的变量，在每个组件中使用，引用组件中之后，各个变量是相互独立的，值的修改只影响当前组件，不会影响其它组件