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中存值和取值的几种常用方式,你可以根据具体需求选择合适的方法来实现。

相关推荐
古韵11 小时前
你的 uni-app 分页,一个 hook 搞定竞态和加载
javascript·vue.js·uni-app
游戏开发爱好者817 小时前
iOS应用加固方案全解析:源码加固与IPA在线加固对比
android·macos·ios·小程序·uni-app·cocoa·iphone
满栀58518 小时前
uni-app 小程序开发实战:从路由踩坑、数据对接到 UI 优化的全方位复盘
ui·uni-app·notepad++
他叫自己MR张2 天前
uni-app 应用启动报uni-ad业务状态异常(-9002)【已解决】
uni-app
2501_915909062 天前
iOS应用性能监控 Instruments工具与崩溃日志分析完整指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915918412 天前
详解iOS App上架至App Store的全流程步骤与注意事项
android·macos·ios·小程序·uni-app·cocoa·iphone
anyup2 天前
终于在今天入选了 Gitee GVP,这真值得庆祝~
前端·uni-app·开源
虚惊一场3 天前
撤销为什么只需要 pop:用事件重放实现离线台球计分
微信小程序·uni-app
虚惊一场3 天前
从一个小程序到一座工具箱:uni-app 分包与 Flask 微服务实践
微信小程序·uni-app
Cry丶3 天前
【已解决】adb devices 能识别手机,但 HBuilderX 搜索不到设备的避坑指南
android·adb·uni-app·hbuilderx·真机调试