uniapp存值和取值方法

简介: 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 };
    }
  }
}
  1. 本地缓存:可以使用uni.setStorageSync方法将数据存储到本地缓存中,使用uni.getStorageSync方法从本地缓存中读取数据。
// 存值
uni.setStorageSync('key', 'value');
// 取值
const value = uni.getStorageSync('key');
  1. 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中存值和取值的几种常用方式,你可以根据具体需求选择合适的方法来实现。

相关文章
uniapp解决首页subNvue,hide方法关闭不了问题
uniapp解决首页subNvue,hide方法关闭不了问题
uniapp页面之间通信、传参、传值方法(父→传→子,子→传→父);获取被打开页面的数据→传→当前页面;当前页面的数据→传→被打开页面
uniapp页面之间通信、传参、传值方法(父→传→子,子→传→父);获取被打开页面的数据→传→当前页面;当前页面的数据→传→被打开页面
|
数据处理 开发者
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
【5月更文挑战第17天】提升Uniapp开发效率的关键包括组件化、模板语法、数据处理和代码组织。通过封装组件如通用按钮,利用列表渲染生成多个元素,使用计算属性和方法处理复杂逻辑,以及采用预处理器如Sass编写样式。此外,良好的代码结构和使用开发者工具进行调试也是重要环节。掌握这些进阶技巧能帮助开发者更高效地构建高质量应用。
360 2
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
|
9月前
|
iOS开发 开发者 Windows
uniapp云打包ios应用证书的获取方法,生成指南
打包用到的一共两个文件,一个是p12格式的私钥证书,一个是证书profile文件。其中生成p12证书的时候,按照官网的教程,是需要MAC电脑来协助做的,主要是生成一些csr文件和导出p12证书等。其实这些步骤也可以借助一些其他的工具来实现,不一定使用mac电脑,用windows电脑也可以创建。
1168 0
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
1616 1
|
移动开发 小程序 API
uniapp组件库Line 线条 的适用方法
uniapp组件库Line 线条 的适用方法
829 0
|
移动开发 小程序 iOS开发
uniapp组件库fullScreen 压窗屏的适用方法
uniapp组件库fullScreen 压窗屏的适用方法
676 1
|
JavaScript API
uniapp中路由拦截方法
uniapp中路由拦截方法
1439 0
|
小程序 Android开发
uniapp进行条件编译的两种方法
uniapp进行条件编译的两种方法
556 0
|
前端开发
uniapp去除滚动条的方法
uniapp去除滚动条的方法

热门文章

最新文章