深入UniApp X：掌握复杂列表与全局状态管理的艺术

在 UniApp X 的开发过程中，特别是针对 App 平台时，你可能会发现它暂时不支持一些流行的状态管理库如 Pinia 或 Vuex。不过，这并不意味着你无法有效地管理全局变量和应用状态。通过使用 globalData 或者创建一个专用模块来组织和管理这些数据，你仍然可以实现高效的状态管理。

专用模块方法

一种推荐的方法是定义一个专用的模块来处理全局状态。这种方法不仅清晰而且易于维护。下面是一个简单的例子，展示了如何创建并使用这样一个模块。

定义状态管理模块

首先，在你的项目中创建一个新的文件，例如 /store/index.uts，并在其中定义你的状态、类型以及修改状态的方法。

// /store/index.uts

// 定义一个大写的State类型
export type State = {
  globalNum: number
  // 可以根据需要增加更多属性
}

// 使用reactive创建响应式状态实例
import { reactive } from 'vue'

// 实例化为state
export const state = reactive({ globalNum: 0 } as State)

// 定义修改属性值的方法
export const setGlobalNum = (num: number) => {
  state.globalNum = num
}

在页面中使用该模块

接下来，在任何你需要访问或修改 globalNum 的页面或组件中导入这个模块，并通过 Vue 的计算属性和方法来操作它。

<template>
  <text @click="plus">{{ globalNum }}</text>
</template>

<script lang="uts">
import { state, setGlobalNum } from '@/store/index.uts' // 导入状态和修改其属性值的方法

export default {
  computed: {
    globalNum(): number { // 定义可绑定在界面上的globalNum
      return state.globalNum
    }
  },
  methods: {
    plus() {
      setGlobalNum(state.globalNum + 1)
    }
  }
}
</script>

在这个例子中，我们通过点击文本元素触发 plus 方法，该方法会调用 setGlobalNum 来更新 globalNum 的值。由于 globalNum 是一个计算属性，界面会自动随着状态的变化而更新。

使用 globalData

除了上述方法外，UniApp 还提供了 globalData 来存储全局变量。这种方式更加直接简单，但可能不如专用模块那样结构清晰和易于维护。

// 在app.js或其他入口文件中定义
getApp().globalData = {
  globalNum: 0
};

// 在其他页面中访问
const app = getApp();
console.log(app.globalData.globalNum);
app.globalData.globalNum += 1;

虽然这种方法非常直观，但它缺乏类型安全性和模块化带来的好处，因此对于复杂的应用来说，推荐使用前面介绍的专用模块方法。

结论

尽管 UniApp X 当前不支持 Pinia 或 Vuex，但通过创建专用的状态管理模块或者利用 globalData，开发者依然能够有效地管理和维护应用中的全局变量与状态。选择哪种方式取决于项目的具体需求和复杂度。希望这篇指南能帮助你在 UniApp X 中更好地进行状态管理，构建出既强大又易维护的应用程序。