01.main.js挂载方案(最常用):
main.js部分:

// main.js
import App from './App'
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'

// 全局挂载
import $tools from './tool';
Vue.prototype.$tools = $tools;

const app = new Vue({
    ...App
})
app.$mount()

全局工具:

// tool/index.js
export default {
	aa: '8888',
	bb: () => {
		// ...
	}
}

页面引用:

<template>
	<view class="content">
		获取到:{{getAA}}
	</view>
</template>

<script>
	const app = getApp(); //同小程序app,类似vue的全局this
	console.log(app.$tools.aa); //调用方式

	export default {
		data() {
			return {
				getAA: app.$tools.aa
			}
		},
	}
</script>

<style>
	.content {
		text-align: center;
		padding-top: 30rpx;
	}
</style>

02.借用globalData全局对象:
App.vue:

<script>
	import $tools from './tool';
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		globalData: {
			...$tools
		}
	}
</script>

全局工具:

// tool/index.js
export default {
	aa: '8888',
	bb: () => {
		// ...
	}
}

调用:

<template>
	<view class="content">
		获取到:{{getAA}}
	</view>
</template>

<script>
	const app = getApp(); //同小程序app,类似vue的全局this
	console.log(app.globalData.aa); //调用方式

	export default {
		data() {
			return {
				getAA: app.globalData.aa
			}
		},
	}
</script>

03.直接调用:

<template>
	<view class="content">
		获取到:{{getAA}}
	</view>
</template>

<script>
	import $tools from '@/tool/index.js';
	console.log($tools.aa)

	export default {
		data() {
			return {
				getAA: $tools.aa
			}
		},
	}
</script>


到此,基本上就结束了。常用的就是第一种挂载全局,globalData一般是类似vuex全局储存值。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐