Vue.js中监听类getter实现Ionic页面数据自动更新

问题根源 #

你当前的collected是组件初始化时一次性赋值的静态数据，后续UserData内部的chronologically数组更新时，组件的collected并没有同步获取最新值；同时你尝试的监听写法错误——Vue的watch无法监听外部方法，也不能直接监听非响应式的外部对象属性。

以下是几种无需Vuex的可行解决方案：

方案1：将collected改为计算属性 #

计算属性会在每次页面渲染时重新执行，自动获取最新的列表数据：

import { UserData } from '@/internal/databases/UserData';
// 其他导入...

export default {
    components: {
        IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow, IonCol, IonIcon
    },

    data() {
        return {
            getDiscovery: Utils.getDiscovery,
        }
    },

    // 替换原data中的collected为计算属性
    computed: {
        collected() {
            return UserData.getCollectedChronologically();
        }
    }
}

方案2：手动触发数据刷新（已知更新时机时） #

如果知道用户执行新增操作的具体时机（比如新增按钮的点击事件），可以在操作完成后手动更新collected：

export default {
    // ...其他配置
    methods: {
        async handleAddItem(newItem) {
            // 执行新增逻辑，将数据存入UserData
            await UserData.addCollectedItem(newItem);
            // 手动更新组件内的collected
            this.collected = UserData.getCollectedChronologically();
        }
    }
}

如果新增操作在其他组件执行，可以用事件总线通知当前组件更新：

1. 创建事件总线工具：

   // src/utils/eventBus.js
   import Vue from 'vue';
   export const EventBus = new Vue();
   

2. 新增组件触发更新事件：

   import { EventBus } from '@/utils/eventBus';
   
   // 新增完成后调用
   EventBus.$emit('collected-updated');
   

3. 当前列表组件监听事件并更新：

   import { EventBus } from '@/utils/eventBus';
   
   export default {
       data() {
           return {
               collected: UserData.getCollectedChronologically(),
               getDiscovery: Utils.getDiscovery,
           }
       },
       mounted() {
           this.updateListener = EventBus.$on('collected-updated', () => {
               this.collected = UserData.getCollectedChronologically();
           });
       },
       beforeDestroy() {
           // 销毁前移除监听，避免内存泄漏
           EventBus.$off('collected-updated', this.updateListener);
       }
   }
   

方案3：给UserData添加订阅通知机制 #

修改UserData类，加入数据变化的订阅/通知逻辑，当collected数据更新时主动通知组件：

// UserData.js
class UserData {
    constructor() {
        this.data = {
            collected: {
                chronologically: []
            }
        };
        this.subscribers = []; // 存储订阅回调
    }

    // 添加订阅方法，返回取消订阅的函数
    subscribe(callback) {
        this.subscribers.push(callback);
        return () => {
            this.subscribers = this.subscribers.filter(cb => cb !== callback);
        };
    }

    // 数据更新时通知所有订阅者
    notifySubscribers() {
        this.subscribers.forEach(callback => callback());
    }

    // 示例：新增项目的方法（需在原有新增逻辑中调用notifySubscribers）
    addCollectedItem(item) {
        this.data.collected.chronologically.push(item);
        this.notifySubscribers();
    }

    getCollectedChronologically() {
        return this.data.collected.chronologically;
    }
}

export const UserData = new UserData();

然后在组件中订阅数据变化：

export default {
    data() {
        return {
            collected: UserData.getCollectedChronologically(),
            getDiscovery: Utils.getDiscovery,
            unsubscribe: null
        }
    },
    mounted() {
        // 订阅数据变化，更新collected
        this.unsubscribe = UserData.subscribe(() => {
            // 解构数组触发Vue响应式更新
            this.collected = [...UserData.getCollectedChronologically()];
        });
    },
    beforeDestroy() {
        // 取消订阅
        this.unsubscribe();
    }
}

内容的提问来源于stack exchange，提问作者Biskweet