uni-app中数据缓存与调用

目录

一.缓存方式

二.存储缓存方式

三.本地缓存与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状态管理的区别

1. 数据存储位置：

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

2. 数据持久性：

   • 本地缓存：本地缓存中的数据可以具有持久性，即关闭应用程序后仍然保留在本地存储器中，下次打开应用程序时可以继续访问。
   • Vuex：Vuex 中的数据仅在当前应用程序的生命周期内有效，一旦应用程序关闭或刷新，Vuex 中的数据将被重置。

3. 数据共享范围：

   • 本地缓存：本地缓存的数据可以在应用程序的不同页面或组件中进行访问和共享，可以用于存储一些全局配置信息、用户登录信息等。
   • Vuex：Vuex 中的数据可以在应用程序的不同组件中进行访问和共享，用于管理共享状态，例如用户信息、购物车数据等。

4. 数据更新方式：

   • 本地缓存：通过读取和写入本地存储器中的数据来更新本地缓存，需要手动管理数据的读取和更新。
   • Vuex：通过提交 mutation 来更新 Vuex 中的数据，确保数据的更新是响应式的，任何对数据的修改都会自动触发组件的重新渲染。

综上所述，本地缓存适用于需要持久化存储数据、跨页面或组件共享数据的场景，而 Vuex 适用于全局状态管理、多组件之间共享数据的场景。