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

相关文章
|
11月前
uniapp解决首页subNvue,hide方法关闭不了问题
uniapp解决首页subNvue,hide方法关闭不了问题
|
5月前
uniapp页面之间通信、传参、传值方法(父→传→子,子→传→父);获取被打开页面的数据→传→当前页面;当前页面的数据→传→被打开页面
uniapp页面之间通信、传参、传值方法(父→传→子,子→传→父);获取被打开页面的数据→传→当前页面;当前页面的数据→传→被打开页面
|
5月前
|
数据处理 开发者
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
【5月更文挑战第17天】提升Uniapp开发效率的关键包括组件化、模板语法、数据处理和代码组织。通过封装组件如通用按钮,利用列表渲染生成多个元素,使用计算属性和方法处理复杂逻辑,以及采用预处理器如Sass编写样式。此外,良好的代码结构和使用开发者工具进行调试也是重要环节。掌握这些进阶技巧能帮助开发者更高效地构建高质量应用。
94 2
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
|
3月前
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
305 1
|
5月前
|
移动开发 小程序 API
uniapp组件库Line 线条 的适用方法
uniapp组件库Line 线条 的适用方法
249 0
|
5月前
|
移动开发 小程序 iOS开发
uniapp组件库fullScreen 压窗屏的适用方法
uniapp组件库fullScreen 压窗屏的适用方法
157 1
|
5月前
|
JavaScript API
uniapp中路由拦截方法
uniapp中路由拦截方法
348 0
|
5月前
|
小程序 Android开发
uniapp进行条件编译的两种方法
uniapp进行条件编译的两种方法
176 0
|
5月前
|
前端开发
uniapp去除滚动条的方法
uniapp去除滚动条的方法
|
5月前
|
JavaScript API
uniapp自定义导航栏方法
uniapp自定义导航栏方法
538 0
下一篇
无影云桌面