当前位置：首页 > uni-app

uniapp 数据

2026-03-04 20:44:40uni-app

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
    }
  }
}

uniapp 数据