uniapp 数据
uniapp 数据管理方法
本地存储
使用 uni.setStorageSync 和 uni.getStorageSync 进行本地数据持久化存储。适合保存用户偏好设置或小型数据。
// 存储数据
uni.setStorageSync('key', 'value');
// 获取数据
const data = uni.getStorageSync('key');全局变量
在 App.vue 中定义全局变量，通过 getApp().globalData 访问。适用于跨页面共享数据。
// App.vue 中定义
globalData: { userInfo: null }
// 页面中调用
getApp().globalData.userInfo = { name: 'John' };Vuex 状态管理
通过 Vuex 集中管理复杂应用状态。需在项目中安装并配置 vuex。
// store/index.js
export default new Vuex.Store({
state: { count: 0 },
mutations: { increment(state) { state.count++ } }
});
// 页面中使用
this.$store.commit('increment');页面传参
使用 uni.navigateTo 的 url 参数或事件总线传递数据。适合简单页面间通信。
// 传递参数
uni.navigateTo({ url: '/pages/detail?id=1' });
// 接收参数
onLoad(options) { console.log(options.id); }云数据库
集成 uniCloud 直接操作云端数据库。适合需要后端协作的场景。
const db = uniCloud.database();
db.collection('users').get().then(res => { console.log(res); });数据绑定与渲染
在模板中使用 {{}} 语法或 v-model 实现双向绑定。
<view>{{message}}</view>
<input v-model="inputValue" />注意事项
- 本地存储有大小限制（通常 5MB-10MB）。
- 全局变量非响应式，需手动触发更新。
- Vuex 适合中大型项目，小型项目可能过度设计。
- 云数据库需配置服务空间和权限。
