uniapp中mixins的使用

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

一、创建mixins 页面

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

javascript 复制代码
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 为组件

javascript 复制代码
    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: 可以定义共用的变量,在每个组件中使用,引用组件中之后,各个变量是相互独立的,值的修改只影响当前组件,不会影响其它组件

相关推荐
会点法律的程序员13 小时前
小程序 地理位置授权怎么搞
前端·小程序·uni-app
重生之我是菜鸡程序员14 小时前
uniapp 顶部通知 上滑隐藏
前端·javascript·uni-app
FliPPeDround14 小时前
告别 uni-app 启动烦恼:@uni-helper/unh 让开发流程更顺畅
前端·微信小程序·uni-app
2501_9159214317 小时前
iOS 26 电耗监测与优化,耗电问题实战 + 多工具 辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9159214317 小时前
苹果软件混淆与 iOS 应用加固白皮书,IPA 文件加密、反编译防护与无源码混淆方案全解析
android·ios·小程序·https·uni-app·iphone·webview
@二十六17 小时前
微信小程序订阅消息工具封装,兼容一次性订阅和长期订阅
微信小程序·小程序·订阅消息
anyup17 小时前
🔥开源零配置!10 分钟上手:create-uni + uView Pro 快速搭建企业级 uni-app 项目
前端·前端框架·uni-app
你真的可爱呀17 小时前
uniapp学习【vue3在uniapp中语法,使用element,使用uView UI】
学习·uni-app
保利威直播18 小时前
保利威uniapp直播插件功能清单-开播端/主播端/观看端(持续测试更新中...)
uni-app·直播·直播平台
dcloud_jibinbin18 小时前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
前端·webpack·性能优化·小程序·uni-app·vue