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

相关推荐
用户6990304848752 天前
try catch使用场景 处理同步代码错误兼容用的
javascript·uni-app
ITKEY_2 天前
uniapp微信开发者工具 更改AppID失败 touristappid
uni-app
Geek_Vison2 天前
APP瘦身实战:从80MB+砍到15MB——基于小程序容器技术剥离APP非核心业务的实践分享
小程序·uni-app·mpaas
CHB3 天前
HDC2026 演讲实录|AI 驱动的跨端进化:利用 uni-agent 快速构建高性能鸿蒙应用
uni-app·harmonyos
2501_915918413 天前
iOS App性能测试工具的实现方法与优化循环指南
android·ios·小程序·https·uni-app·iphone·webview
斯内普吖3 天前
(开源)高校素拓分管理系统小程序实战指南 基于 Java + SpringBoot + uni-app + Vue + MySQL
java·spring boot·mysql·小程序·uni-app·开源
海阔天空66883 天前
uniapp开启调试模式
uni-app·uniapp开启调试模式
anyup4 天前
分享 5 套 uni-app 实用主题,一键适配暗黑模式
前端·uni-app·视觉设计
gg159357284604 天前
Uni-app跨平台开发全解课程:从零基础到企业级多端落地实战
vue.js·uni-app
xshirleyl5 天前
uniapp小兔鲜儿day3
uni-app