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.json
或 env.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);
这些方法提供了不同场景下定义和访问全局变量的方案,开发者可以根据具体需求选择合适的方式。