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 グローバル ストレージ値に似ています。