uniapp存值和取值方法

在UniApp中,可以使用全局变量、本地缓存和Vuex状态管理等方式来进行存值和取值。

  1. 全局变量:可以在App.vue文件的data中定义一个全局变量,在其他页面或组件中通过uni.$emit方法修改其值,并通过uni.$on方法监听值的变化。

    // App.vue
    export default {
    data() {
    return {
    globalData: {}
    }
    }
    }

    // 页面或组件中获取全局变量
    export default {
    computed: {
    globalData() {
    return this.root.globalData; } }, methods: { updateGlobalData() { this.root.globalData = { key: value };
    }
    }
    }

  2. 本地缓存:可以使用uni.setStorageSync方法将数据存储到本地缓存中,使用uni.getStorageSync方法从本地缓存中读取数据。

    // 存值
    uni.setStorageSync('key', 'value');

    // 取值
    const value = uni.getStorageSync('key');

  3. Vuex状态管理:UniApp内置了Vuex状态管理库,可以在store目录下创建模块文件进行状态管理。通过commit方法提交一个mutation来更新状态,并通过getters获取状态值。

    // store/module.js
    const state = {
    key: value
    };

    const mutations = {
    updateValue(state, payload) {
    state.key = payload;
    };

    const actions = {
    updateValue({ commit }, payload) {
    commit('updateValue', payload);
    }
    };

    const getters = {
    getValue(state) {
    return state.key;
    };

    export default {
    state,
    mutations,
    actions,
    getters
    };

    // 页面或组件中获取状态值
    import { mapGetters, mapActions } from 'vuex';

    export default {
    computed: {
    ...mapGetters(['getValue'])
    },
    methods: {
    ...mapActions(['updateValue'])
    }
    }

以上是UniApp中存值和取值的几种常用方式,你可以根据具体需求选择合适的方法来实现。

相关推荐
^Rocky7 小时前
uniapp 实现腾讯云IM群文件上传下载功能
uni-app·腾讯云
moxiaoran57538 小时前
uni-app学习笔记三十四--刷新和回到顶部的实现
笔记·学习·uni-app
y东施效颦9 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
华子w90892585910 小时前
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
spring boot·微信小程序·uni-app
性野喜悲12 小时前
uniapp+<script setup lang=“ts“>解决有数据与暂无数据切换显示,有数据加载时暂无数据闪现(先加载空数据)问题
uni-app
假客套15 小时前
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
微信·uni-app·旅游
邹荣乐15 小时前
uni-app开发微信小程序的报错[渲染层错误]排查及解决
前端·微信小程序·uni-app
xw515 小时前
支付宝小程序外链跳转调试爬坑
uni-app·支付宝
^Rocky16 小时前
uniapp 对接腾讯云IM群组成员管理(增删改查)
uni-app·腾讯云
假客套17 小时前
2025 后端自学UNIAPP【项目实战:旅游项目】7、景点详情页面【完结】
前端·uni-app·旅游