uniApp全局变量怎么定义,怎么获取 ?

在 uni-app 中定义和获取全局变量的方式主要有以下几种:

1. Vue原型上定义

可以在 main.js 文件中,通过 Vue 的原型链定义全局变量,这样在任何组件中都可以通过 this 访问到这些全局变量。

// main.js
Vue.prototype.globalVar = '这是一个全局变量';

// 在组件中获取
export default {
  mounted() {
    console.log(this.globalVar); // 输出:这是一个全局变量
  }
}

2. 使用Vuex状态管理

对于复杂的应用,推荐使用 Vuex 来管理全局状态。首先需要安装 Vuex 并在项目中进行配置。

// 安装Vuex
npm install vuex --save

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    globalVar: '这是一个全局状态'
  },
  mutations: {
    setGlobalVar(state, value) {
      state.globalVar = value;
    }
  }
})

export default store

// main.js 中引入 store
import Vue from 'vue'
import App from './App'
import store from './store'

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

在任何组件中,通过 this.$store.state.globalVar 访问全局变量,通过 this.$store.commit('setGlobalVar', newValue) 来修改全局变量。

3. 全局配置文件

对于一些不会改变的全局变量,如API的域名,可以在 manifest.jsonenv.js 等配置文件中定义,然后在代码中导入使用。

// env.js
const env = {
  API_URL: 'https://api.example.com'
}

export default env

// 在组件中使用
import env from '@/path/to/env.js'

console.log(env.API_URL);

4. getApp() 方法

uni-app 也支持使用 getApp() 方法获取全局的 App 实例,并在其上定义全局变量。

// 在 main.js 或任何位置设置
const app = getApp();
app.globalData = { globalVar: '这是一个全局变量' };

// 在任何组件中获取
const app = getApp();
console.log(app.globalData.globalVar);

这些方法提供了不同场景下定义和访问全局变量的方案,开发者可以根据具体需求选择合适的方式。

发表评论

后才能评论