uniapp 数据
Uniapp 数据管理方法
Uniapp 提供了多种数据管理方式，适用于不同场景的需求。以下是一些核心方法：
全局数据管理
使用 uni-app 提供的 globalData 机制，可以在 App.vue 中定义全局变量，方便跨页面共享数据。在 App.vue 的 script 部分定义：
<script>
export default {
globalData: {
userInfo: null
},
onLaunch: function() {
console.log('App Launch')
}
}
</script>在其他页面通过 getApp().globalData 访问或修改全局数据。
页面间数据传递
使用 uni.navigateTo 或 uni.redirectTo 的 url 参数传递数据：
uni.navigateTo({
url: '/pages/detail/detail?id=1&name=test'
})在目标页面通过 onLoad 生命周期函数的参数接收：
onLoad(options) {
console.log(options.id) // 输出 1
console.log(options.name) // 输出 test
}本地存储
利用 uni.setStorage 和 uni.getStorage 实现数据持久化：
// 存储数据
uni.setStorage({
key: 'key',
data: 'value',
success: function () {
console.log('存储成功')
}
})
// 获取数据
uni.getStorage({
key: 'key',
success: function (res) {
console.log(res.data) // 输出 value
}
})Vuex 状态管理
对于复杂应用，可以使用 Vuex 进行集中式状态管理。在 store/index.js 中配置：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
})
export default store在 main.js 中引入并挂载到 Vue 实例，在组件中通过 this.$store 访问。
数据绑定与响应式
Uniapp 基于 Vue.js，支持数据双向绑定。在模板中使用 {{}} 语法显示数据：
<template>
<view>{{message}}</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello Uniapp'
}
}
}
</script>对于表单元素，使用 v-model 实现双向绑定：
<input v-model="inputValue" />数据请求与接口调用
通过 uni.request 发起网络请求获取数据：
uni.request({
url: 'https://example.com/api',
method: 'GET',
success: (res) => {
console.log(res.data)
},
fail: (err) => {
console.error(err)
}
})数据监听与计算属性
使用 watch 监听数据变化：
export default {
data() {
return {
count: 0
}
},
watch: {
count(newVal, oldVal) {
console.log(`count 从 ${oldVal} 变为 ${newVal}`)
}
}
}利用计算属性处理复杂逻辑：
export default {
data() {
return {
firstName: '张',
lastName: '三'
}
},
computed: {
fullName() {
return this.firstName + this.lastName
}
}
}
