uniapp mixins的使用

1. uniapp mixins的使用

  mixins 是一个 js 对象，它可以包含我们组件中JS部分的任意功能选项，如：data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中，当组件使用 mixins 对象时所有 mixins 对象都将被混入该组件中。
  mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。
  Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

1.1. 创建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 + ''})}}
}

1.2. 在页面中引用 mixins

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

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