uniapp实现全局函数

### 创建和使用全局函数 在 UniApp 中创建可全局调用的函数可以通过多种方式实现，其中一种常见的方式是在 `common` 文件夹内创建一个 JavaScript 文件来保存公共方法。另一种更推荐的方法是利用 Vue 的插件机制或 Vuex 来管理全局可用的功能。 #### 方法一：通过 common 文件夹定义通用工具类 可以在项目的 `common` 目录下新建文件用于存放常用功能函数： ```javascript // common/util.js export function globalFunction(message) { console.log(`Global Function Called with message: ${message}`); } ``` 然后在需要的地方引入并使用此模块： ```javascript import { globalFunction } from '@/common/util'; globalFunction('Hello World'); ``` 这种方法简单明了，但对于大型项目来说可能不够灵活[^1]。 #### 方法二：基于Vue 插件注册全局方法 为了使某些方法真正成为全局性的，可以考虑将其作为 Vue 实例的一部分来进行扩展。这通常涉及到创建一个新的插件，并在应用启动时加载它。 首先，在合适的位置（比如 `/plugins/` 下）建立新的 js 文件: ```javascript // plugins/globalMethods.js const GlobalMethodPlugin = { install(Vue, options) { // 添加实例方法 Vue.prototype.$myGlobalFunc = (msg) => { console.log(msg); }; // 或者添加静态方法 Object.defineProperty(Vue, 'staticMethod', { value: () => alert('This is a static method'), writable: false, }); } }; export default GlobalMethodPlugin; ``` 接着修改 main.js 或 app.vue 将其导入并安装： ```javascript // main.js or App.vue <script> import GlobalMethodPlugin from './plugins/globalMethods'; ... Vue.use(GlobalMethodPlugin); new Vue({ ... }).$mount('#app'); ``` 现在就可以在整个应用程序范围内访问 `$myGlobalFunc()` 和 `Vue.staticMethod()` 函数了[^2]。 #### 方法三：借助Vuex进行状态管理和共享逻辑 如果希望将一些业务逻辑封装成服务供各处调用，则可以考虑把它们放在 store 中处理。这种方式特别适用于那些依赖于应用状态变化而工作的场景。 例如，在 `store/index.js` 定义 action 及 mutation : ```javascript // store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: {}, mutations: { setModel(state, model){ state.model=model; }, }, actions:{ async fetchSystemInfo({ commit }) { try{ const res=await uni.getSystemInfoSync(); commit('setModel',res.model); }catch(e){ throw e; } } } }); ``` 之后便可在任何地方轻松获取到这些被集中管理的服务： ```javascript this.$store.dispatch('fetchSystemInfo').then(()=>{ console.log(this.$store.state.model); }); ``` 以上三种方案各有优劣，可根据实际开发需求选取最合适的策略[^3]。