当前位置：首页 > uni-app

uniapp全局实例

2026-03-05 08:09:09uni-app

uniapp全局实例的概念

在uniapp中，全局实例是指在整个应用生命周期内可访问的共享对象或方法。通常用于存储全局变量、工具函数或跨页面共享的数据。通过全局实例，可以避免重复定义和传递数据，提升代码复用性和可维护性。

创建全局实例的方式

1. 使用App.vue的globalData 在App.vue文件中，可以通过globalData定义全局变量：

export default {
  globalData: {
    baseURL: 'https://example.com/api',
    userInfo: null
  }
}

在页面或组件中通过getApp()访问：

const app = getApp()
console.log(app.globalData.baseURL)

2. 通过Vue的原型链挂载 在main.js中，可以通过Vue.prototype挂载全局方法或属性：

import Vue from 'vue'
Vue.prototype.$utils = {
  formatTime: (timestamp) => {
    return new Date(timestamp).toLocaleString()
  }
}

在组件中直接通过this调用：

this.$utils.formatTime(Date.now())

3. 使用Vuex状态管理 对于复杂的全局状态，推荐使用Vuex集中管理：

// store/index.js
export default new Vuex.Store({
  state: {
    token: ''
  },
  mutations: {
    setToken(state, payload) {
      state.token = payload
    }
  }
})

在组件中通过this.$store访问：

this.$store.commit('setToken', 'new-token')

全局实例的注意事项

命名规范：全局变量或方法建议以$开头（如$api），避免与组件内属性冲突。
性能影响：避免在全局实例中存储过大的数据，可能影响内存占用。
响应式限制：直接添加到globalData的数据不是响应式的，需手动触发更新。

实际应用示例

全局请求封装

// main.js
Vue.prototype.$request = async function(url, data) {
  const res = await uni.request({
    url: getApp().globalData.baseURL + url,
    data
  })
  return res[1].data
}

// 组件中使用
this.$request('/user/info').then(res => {
  console.log(res)
})

全局事件总线

uniapp全局实例

// main.js
Vue.prototype.$eventBus = new Vue()

// 组件A发送事件
this.$eventBus.$emit('login-success')

// 组件B监听事件
this.$eventBus.$on('login-success', () => {
  console.log('登录成功')
})