uniapp ios 图片本地黑屏

转载

mob64ca13f937ae 2024-10-09 16:21:13

文章标签 uniapp ios 图片本地黑屏 uni-app 数据本地缓存应用程序 文章分类 iOS 移动开发

一.缓存方式

二.存储缓存方式

三.本地缓存与vuex状态管理的区别

一.缓存方式

1.本地缓存

uni-app 提供了本地存储能力，可以使用 uni.setStorageSync 和 uni.getStorageSync 等方法来将数据存储在本地缓存中，例如使用 localStorage 或者 uni.setStorageSync('key', 'value') 的方式进行数据的存储。
对于一些需要持久化存储的数据，比如用户登录信息、应用配置等，可以使用本地存储来提高数据访问速度。

2.Vuex 状态管理

uni-app 支持使用 Vuex 进行全局状态管理，可以将应用程序的共享状态存储在 Vuex 中，以便在整个应用程序中进行共享和访问。
通过在 Vuex 中存储应用程序的状态数据，可以避免多次重复请求数据，从而提高数据访问速度。

二.存储缓存方式

1.本地缓存的存储方式

uni.setStorageSync(KEY,DATA) 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

参数说明

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象

try {
	uni.setStorageSync('storage_key', 'hello');
} catch (e) {
	// error
}

2.Vuex 的存储

uniapp内置了vuex，所以我们只用按照规则创建调用即可

1.在项目目录创建文件夹store,在其下创建index.js文件

state里的数据就是我们所存储的数据

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    store: [], //商店数据
    cart: [], //购物车数据
    id: '',
    address: {}, //地址
    member: {}, //登录状态
    order: {},
    shopId: [], //支付后订单的商店id
    shopAddress: '' //商店地址
  },
  mutations: {
    //相当于同步的操作
    setShopAddress(state, shopAddress) {
      state.shopAddress = shopAddress
    },

    setMember(state, member) {
      state.member = member
    },
    setAddress(state, address) {
      state.address = address
    },
    
    setStore(state, store) {
      state.store = store
    },
    setCart(state, cart) {
      state.cart = cart
    },
    remove_cart(state) {
      state.cart = []
    },
    setOrder(state, order) {
      state.order = order
    },
    setId(state, id) {
      state.id = id
    },
    setShopId(state, shopId) {
      state.shopId = shopId
    }
  },
  actions: {
    
  }
})
export default store

2.在页面中将数据存入状态管理

this.$store.commit('setStore', "购物车数据");

首先，this.$store.commit 是 Vuex 提供的方法，用于提交一个 mutation。

setStore 是一个 mutation 的名称，它接受两个参数：state 和 store。state 是 Vuex 中的状态对象，而 store则是传入的数据。

在页面中调用了名为 "setStore" 的 mutation，并传入了 "购物车数据"作为参数存储

在 setStore 的处理逻辑中，我们将传入的数据 data 赋值给 state.store。这样就完成了将排序后的数据存储到 Vuex 的 store 中的操作。

三.页面中获取缓存

1.获取本地缓存

uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

参数说明

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key

const value = uni.getStorageSync('storage_key');

2.获取vuex中的数据

通过this.$store访问到state里的数据

this.$store.store

三.本地缓存与vuex状态管理的区别

数据存储位置：

本地缓存：本地缓存是将数据存储在客户端本地，通常使用浏览器提供的本地存储技术（如 localStorage、sessionStorage）或 uni-app 提供的本地存储 API（如 uni.setStorageSync、uni.getStorageSync）来实现。
Vuex：Vuex 是 uni-app 提供的状态管理模式，数据存储在 Vuex 的状态树中，位于内存中，用于在应用程序的不同组件之间共享和管理数据。