uniapp监听uni.getStorageSync('curBizType')值变化

在 UniApp 中，`uni.getStorageSync()` 是一个同步方法，用于获取本地缓存数据，但它本身不具备监听变化的能力。由于 `uni.getStorageSync()` 获取的是存储中某一时刻的静态值，因此无法直接通过它来监听 `curBizType` 的变化。 ### 使用 Vue 响应式机制实现监听 若需监听 `curBizType` 的变化，可将其封装为 Vue 的响应式数据。例如，可以在页面或全局状态管理中定义一个计算属性，并结合 `watch` 监听其变化： ```javascript export default { data() { return { curBizType: uni.getStorageSync('curBizType') || '' }; }, watch: { curBizType(newVal) { console.log('业务类型已更新:', newVal); } }, methods: { updateCurBizType(value) { uni.setStorageSync('curBizType', value); this.curBizType = value; } } }; ``` 通过该方式，当调用 `updateCurBizType()` 方法修改 `curBizType` 时，不仅会更新本地存储，还会触发 Vue 的响应式更新机制，从而激活 `watch` 回调[^1]。 ### 使用全局事件总线进行跨组件通信 对于多个组件或页面需要共享和监听 `curBizType` 的场景，可以借助 Vue 的全局事件总线（Event Bus）机制，在修改数据后主动通知其他组件更新： ```javascript // main.js const eventBus = new Vue(); Vue.prototype.$eventBus = eventBus; // 页面 A methods: { updateCurBizType(value) { uni.setStorageSync('curBizType', value); this.$eventBus.$emit('curBizTypeChanged', value); } } // 页面 B mounted() { this.$eventBus.$on('curBizTypeChanged', (newVal) => { console.log('接收到业务类型更新:', newVal); }); } ``` 这种方式适用于组件间通信，且不依赖于本地存储读取时机的问题[^2]。 ### 使用 Vuex 管理状态 如果项目结构较为复杂，推荐使用 Vuex 进行全局状态管理。将 `curBizType` 存储在 Vuex Store 中，并通过 `watch` 或 `computed` 属性监听其变化，能更有效地管理状态同步问题： ```javascript // store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { curBizType: uni.getStorageSync('curBizType') || '' }, mutations: { setCurBizType(state, value) { state.curBizType = value; uni.setStorageSync('curBizType', value); } } }); // 页面组件中 computed: { curBizType() { return this.$store.state.curBizType; } }, watch: { curBizType(newVal) { console.log('业务类型已更新:', newVal); } } ``` 通过 Vuex，能够统一状态来源，并确保所有组件中的 `curBizType` 保持一致，同时支持异步操作和模块化管理[^3]。 ### 总结 - 若仅限于单个页面内监听，可通过 Vue 的响应式数据 + `watch` 实现。 - 跨组件通信可使用全局事件总线。 - 对于大型项目或需要集中管理的状态，建议采用 Vuex。