小程序: 抽离实现mixins的使用?

255 阅读1分钟

(1)根目录新建mixins文件夹

完整的mixin就是js相同的的东西拿出来一模一样写在外面的js文件里,需要使用时在相应地方引入即可

(2)在mixins新建js文件,命名为tabbar-badge.js (3)如何封装mixins??

//引入mapGetters映射方法(关于mapGetter的原理及使用见下一篇文章)
import {mapGetters} from 'vuex'
// 导出一个 mixin 对象
export default{
computed:{
      //1.将m_cart里的total映射到当前页面里
      ...mapGetters('m_cart',['total'])
    },
    onShow(){
      this.setBadge()
    },
      methods:{
        setBadge(){
          //为当前页面的tabBar设置索引值
          uni.setTabBarBadge({
            index:2,
            //添加展示值
            text:this.total+''
          })
        }
      }
}

(3)使用mixins文件??

找到需要使用自己封装的mixins的地方,

// 导入自己封装的 mixin 模块
import badgeMix from '@/mixins/tabbar-badge.js'export default {
  // 将 badgeMix 混入到当前的页面中进行使用
  mixins: [badgeMix],
  // 省略其它代码...
}