在微信小程序中，實現多個頁面共享數據有以下幾種常用方式，根據場景選擇最適合的方案：

1. 全局變量（App.js）
   適用場景：簡單數據共享（非響應式）
   實現方式：

javascript
// app.js
App({
globalData: {
userInfo: null,
token: “”
}
})

// 任意頁面獲取/修改
const app = getApp();
app.globalData.token = “new_token”; // 寫入數據
console.log(app.globalData.token); // 讀取數據
缺點：數據變更不會自動觸發頁面更新。

2. 本地緩存（Storage）
   適用場景：持久化數據（如用戶登錄狀態）
   實現方式：

javascript
// 存數據
wx.setStorageSync(‘key’, { name: ‘Alice’ });

// 取數據（任意頁面）
const data = wx.getStorageSync(‘key’);
注意：

同步方法 Sync 結尾，異步用 wx.setStorage

單個 key 最大 1MB，總上限 10MB

用戶清除緩存時數據會丟失

3. 事件總線（EventBus）
   適用場景：跨頁面實時通信
   實現方式：

javascript
// app.js 中初始化事件中心
App({
eventBus: new Map(), // 簡易版
on(event, callback) {
if (!this.eventBus.has(event)) this.eventBus.set(event, []);
this.eventBus.get(event).push(callback);
},
emit(event, data) {
if (this.eventBus.has(event)) {
this.eventBus.get(event).forEach(cb => cb(data));
}
}
})

// A頁面發送事件
const app = getApp();
app.emit(‘dataUpdate’, { newData: 123 });

// B頁面監聽
app.on(‘dataUpdate’, data => {
console.log(‘收到數據:’, data);
this.setData({ received: data }) // 更新視圖
});
優點：解耦頁面間通信
缺點：需手動移除監聽（可在 onUnload 中處理）

4. 狀態管理庫（如 MobX）
   適用場景：復雜應用響應式數據共享
   步驟：

安裝依賴：

bash
npm install mobx-miniprogram mobx-miniprogram-bindings
創建 Store：

javascript
// store.js
import { observable, action } from ‘mobx-miniprogram’;

export const store = observable({
count: 0,
increment: action(function() {
this.count++;
})
});
綁定到頁面：

javascript
import { createStoreBindings } from ‘mobx-miniprogram-bindings’;
import { store } from ‘./store’;

Page({
onLoad() {
this.storeBindings = createStoreBindings(this, {
store,
fields: [‘count’], // 映射數據
actions: [‘increment’] // 映射方法
});
},
onUnload() {
this.storeBindings.destroy(); // 清理綁定
}
})
在頁面中使用：

xml
{{count}}
+1
優點：自動更新視圖，適合中大型項目。

5. 頁面傳參（URL參數）
   適用場景：簡單數據傳遞到下一頁
   實現方式：

javascript
// 頁面A跳轉
wx.navigateTo({
url: ‘/pages/pageB?data=’ + JSON.stringify({ id: 1 })
})

// 頁面B獲取
Page({
onLoad(options) {
const data = JSON.parse(options.data);
}
})
限制：只適用于單向傳遞，數據量不宜過大。

6. 數據庫（云開發）
   適用場景：多端實時同步數據

javascript
// 寫入數據
const db = wx.cloud.database();
db.collection(‘data’).add({ data: { value: 100 } });

// 監聽數據變化（所有頁面）
const watcher = db.collection(‘data’).watch({
onChange: snapshot => console.log(‘新數據’, snapshot)
});
? 方案推薦 ?
場景 推薦方案
簡單全局數據（如用戶信息） App.globalData
需要持久化的數據（如設置項） wx.setStorage
復雜應用狀態管理 MobX 等狀態庫
頁面間事件通知 EventBus
實時多端同步 云數據庫
重要提示：

對于響應式數據更新，優先選擇 MobX 或事件總線

避免濫用全局變量，大型項目用狀態管理更易維護

敏感數據（如 token）不要存儲在 globalData，用 Storage 加密存儲