示例工程前端移动开发跨平台【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址https://gitcode.com/gh_mirrors/un/uni-app点击查看免费下载导读本文围绕 uni-app x 的全局数据共享问题系统讲解三种可选方案轻量的globalData非响应式、官方状态管理库 Pinia完整响应式、支持 Vue 生态写法以及基于 UTS 模块的自定义全局reactive变量不依赖三方库的原生响应式方案。读者将掌握三者的适用场景、完整配置代码、跨平台注意事项并了解它们在当前 uni-app 开源仓库中的真实落地形态。一、全局数据方案的选择是否需要响应式在 uni-app x 项目中页面、组件、UTS 插件之间经常需要共享数据。选择哪种全局方案核心判断标准只有一个该数据是否需要绑定到界面上是否要求响应式。不需要绑定界面仅作为全局常量、配置标记、临时状态使用不参与视图渲染更新可直接使用globalData。需要绑定界面数据变化时页面视图要自动更新此时必须引入响应式状态管理可选方案有两类在独立的 UTS 文件中定义一个全局reactive变量各处引用它引入 Pinia。1.1 globalData最简单的全局变量机制globalData是 uni-app 从微信小程序继承下来的经典机制在 uni-app x 中依然可用。它依赖 Vue 和 JS 环境页面中可正常使用但在 UTS 插件中有平台限制蒸汽模式Vaporuni-app x 新一代编译模式Android 和 iOS 的 UTS 插件环境均不支持鸿蒙页面 script 驱动为 ArkTS 时UTS 插件可以使用 globalData页面 script 驱动为 jsvm 时UTS 插件不能使用。在App.uvue中通过globalData选项定义初始值export default { globalData: { str: globalData str, num: 0, bool: false } }页面或组件中通过getApp().globalData访问。需要特别注意 uni-app x 的两点限制globalData的数据结构与类型由App.uvue中的初始值决定后续只能读取或修改不能新增或删除属性组合式 API 中无法像选项式 API 那样通过this.globalData访问必须使用getApp().globalData且部分生命周期中 App 实例可能尚未初始化需要注意时机问题。globalData的本质是普通对象不具备响应式能力修改后界面不会自动更新。相关说明与示例见 app.md 的 globalData 章节其中也明确引导需要响应式状态管理时参考 store.md。二、方案一Pinia推荐用于复杂业务状态Pinia 是 Vue 官方推荐的状态管理库在 uni-app x 中同样可以使用。与 Web 端完全一致的定义与使用方式让熟悉 Vue 生态的开发者可以零成本迁移。2.1 平台支持与版本说明各平台对 Pinia 的支持情况如下平台/模式支持方式APP 蒸汽模式Vapor可直接使用 Pinia 官方库鸿蒙、iOS VDOM 模式可直接使用 Pinia 官方库Web 平台可直接使用 Pinia 官方库小程序平台可直接使用 Pinia 官方库Android VDOM 模式需使用三方插件 Pinia by utsx-pinia-s从 HBuilderX 5.25 起uni-app x 项目的pinia升级到3.0.4版本。如需使用其他版本可在项目根目录自行安装指定版本。在开源仓库的示例工程 hello-uvue 的 main.uts 中可以观察到真实的平台差异化处理通过条件编译在 Android VDOM 模式APP-ANDROID !VUE3-VAPOR下不引入Pinia其余平台才执行app.use(createPinia())挂载// #ifndef APP-ANDROID !VUE3-VAPOR import { createPinia } from pinia // #endif export function createApp() { const app createSSRApp(App) // #ifndef APP-ANDROID !VUE3-VAPOR app.use(createPinia()) // #endif return { app } }这段源码印证了文档结论Android VDOM 模式需要走x-pinia-s三方插件方案其余平台可直接使用官方库。2.2 在 main.uts 中挂载 Pinia在项目入口main.uts中引入并挂载 Piniaimport App from ./App.uvue import { createSSRApp } from vue import { createPinia } from pinia export function createApp() { const app createSSRApp(App) app.use(createPinia()) return { app } }2.3 定义一个 Storesetup 语法以store/counter.uts为例使用组合式 APIsetup store定义状态、计算属性与操作方法。注意 UTS 环境下计算属性需要显式标注返回类型import { computed, ref } from vue import { defineStore } from pinia export const useCounterStore defineStore(counter, () { const name ref(Pinia) const count ref(0) const doubleCount computed(() : number { return count.value * 2 }) const countText computed(() : string { return ${name.value}: ${count.value} }) const increment () { count.value } const decrement () { count.value-- } const rename () { name.value name.value Pinia ? Pinia Store : Pinia } const reset () { name.value Pinia count.value 0 } return { name, count, doubleCount, countText, increment, decrement, rename, reset } })2.4 页面中使用 Store在页面script setup languts中通过storeToRefs将 store 中的响应式状态解构到模板使用通过 store 实例调用方法template view textname: {{ name }}/text textcount: {{ count }}/text textdouble count: {{ doubleCount }}/text textcount text: {{ countText }}/text button clickincrementincrement/button button clickdecrementdecrement/button button clickrenamerename/button button clickresetreset/button /view /template script setup languts import { storeToRefs } from pinia import { useCounterStore } from /store/counter.uts const counterStore useCounterStore() const { name, count, doubleCount, countText } storeToRefs(counterStore) const increment () { counterStore.increment() } const decrement () { counterStore.decrement() } const rename () { counterStore.rename() } const reset () { counterStore.reset() } /script为什么要用storeToRefsPinia 的 store 是基于reactive包装的对象直接对 store 解构会丢失响应性state 属性被当作普通值复制。storeToRefs会把 store 中的每个响应式状态转为独立的 ref从而保证模板中的name、count等变量在 store 数据变化时自动更新。方法如increment本身不是响应式数据可以直接从 store 实例上调用。2.5 仓库中的真实示例本仓库示例工程 hello-uvue 中包含完整的 Pinia 落地代码入口挂载examples/hello-uvue/main.uts 中演示了带条件编译的 Pinia 挂载方式完整页面示例examples/hello-uvue/pages/pinia/pinia.uvue 将上述模板与脚本整合在一个.uvue文件中store 定义直接内联在页面中并包含increment、decrement、rename、reset四个操作按钮的完整可运行代码适合直接对照阅读。三、方案二全局 reactive 变量零依赖的轻量响应式方案如果不希望引入 Pinia 依赖可以直接在独立的 UTS 文件中用reactive定义一个全局响应式对象。这是 uni-app x 原生支持的方案在蒸汽模式下也能正常工作代码量极小。3.1 定义全局状态模块新建/store/index.uts用类型State约束数据结构用reactive实例化并导出修改方法// 定义一个大写的 State 类型 export type State { globalNum: number // 如有需要可增加更多属性 } // 实例化为 state export const state reactive({ globalNum: 0 } as State) // 定义修改属性值的方法 export const setGlobalNum (num: number) { state.globalNum num }3.2 页面中读写全局状态在需要的页面和 UTS 文件里 import 上述模块通过computed将全局状态映射为页面响应式变量通过导出的方法修改template text clickplus{{ globalNum }}/text /template // 组合式 API script setup languts import { state, setGlobalNum } from /store/index.uts const globalNum computed(() state.globalNum) const plus () { setGlobalNum(state.globalNum 1) } /script核心要点不管在哪个页面、哪个 UTS 文件中修改了globalNum所有绑定了state.globalNum的界面都会自动更新——因为所有模块引用的是同一个reactive对象实例。3.3 仓库中的工程级实践这种方案在 uni-app 官方演示工程中已被大规模使用。src/store/index.uts 即是一个完整的工程级全局状态模块可看到以下工程化经验用export type声明状态结构如GlobalData、UserInfo、SafeArea等类型集中定义保证类型安全reactive实例化并标注类型export const state reactive({...} as State)与文档示例写法一致所有状态修改收敛为导出的具名方法如setUserInfo、setLifeCycleNum、setAgreeToPrivacy、setAllowCapture等避免各页面直接散乱地修改state属性修改方法内可附带副作用例如setAgreeToPrivacy在更新内存状态的同时调用uni.setStorageSync持久化到本地checkSystemTheme内部通过条件编译分别监听 Web/小程序宿主主题与 App 端主题变化再把结果写入响应式状态。以setUserInfo为例其实现非常简洁export const setUserInfo (userInfo : UserInfo | null) { state.userInfo userInfo }这种类型 reactive 实例 导出修改方法的组织方式正是文档所讲方案在生产项目中的标准形态。四、三种方案对比与选型建议维度globalDataPinia全局 reactive 变量响应式能力无不触发界面更新完整响应式完整响应式依赖无内置机制需安装 pinia3.0.4无Vue 内置 APIAndroid VDOM 模式支持UTS 插件除外需三方插件 x-pinia-s支持蒸汽模式仅页面 script 可用官方库直接支持支持类型安全弱结构由初始值决定强TS/UTS 类型强export type 约束学习成本最低需了解 Pinia 概念低适用场景非界面绑定的全局标记、常量复杂业务状态、多模块协作轻量全局响应式数据选型建议临时标记、一次性配置、不参与渲染的数据 →globalData业务复杂、需要多页面多模块共享且强调可维护性 → Pinia只需少量全局响应式数据、不想引入额外依赖 → 全局 reactive 变量。需要注意文档中明确提示globalData依赖 Vue 和 JS 环境在 UTS 插件中使用有限制详见本文 1.1 节的平台差异说明规划跨端能力时需提前评估。五、总结uni-app x 的全局数据共享方案已经相当完善globalData承接简单的非响应式需求Pinia 提供与 Vue 生态一致的完整状态管理体验蒸汽模式、鸿蒙、iOS VDOM、Web、小程序均可直接使用官方库全局reactive变量则以极小的代码量实现零依赖的响应式共享。结合本仓库 hello-uvue 示例 的 Pinia 页面与 src/store/index.uts 的工程级 reactive 模块开发者可以按项目复杂度自由组合构建清晰、类型安全、跨端一致的全局状态层。赞分享示例工程前端移动开发跨平台【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址https://gitcode.com/gh_mirrors/un/uni-app点击查看免费下载相关推荐uni-app 全局 SCSS 变量体系深入解析 uni.scss 的注入机制、内置变量与主题定制实战uni app 全局 SCSS 变量体系深入解析 uni.scss 的注入机制、内置变量与主题定制实战 uni.scss 是 uni app 项目中一个特殊的示例工程前端移动开发跨平台Hyperf超级全局变量协程环境下的全局变量管理Hyperf超级全局变量协程环境下的全局变量管理 引言传统PHP全局变量在协程环境中的挑战 在传统PHP应用中超级全局变量Super Globals如后端Web框架微服务RPC框架异步编程告别全局变量Axum状态管理的5种实战方案与性能对比告别全局变量Axum状态管理的5种实战方案与性能对比 你还在为Rust Web应用中的状态共享烦恼吗当多个请求同时访问数据库连接池或缓存时错误的状态管理可后端Web框架创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考