Vue.js类组件中RxJS Observable更新数据后视图不更新求助

问题根源是Vue的响应式系统无法检测静态类属性的变化。Vue依赖对象属性劫持追踪数据变化，而静态类属性既不属于组件实例的响应式数据，也不在Vue的依赖追踪范围内，所以更新后不会触发视图渲染。

以下是几种可行的解决方式：

1. 将数据仓库转为Vue响应式对象（最简单） #

把MyDataStore改成用Vue.observable()包装的响应式对象，让Vue能追踪其属性变化：

修改MyDataStore.ts：

import Vue from 'vue';

export const MyDataStore = Vue.observable({
  data: '',
  counter: 0
});

MyService.ts保持引用不变（因为还是访问同名对象的属性），组件中直接引用这个响应式对象即可，后续更新MyDataStore的属性时，Vue会自动触发视图更新。

2. 手动触发组件更新（兼容现有静态类结构） #

如果不想修改数据仓库的结构，可以在数据更新后手动调用组件的$forceUpdate()强制渲染：

首先在MyService.ts中添加更新通知机制：

import { of, from, concatMap, delay } from 'rxjs';
import { MyDataStore } from './MyDataStore';

export class MyService {
    public static counter = 0
    private static updateCallbacks: (() => void)[] = [];

    // 注册更新回调
    static registerUpdateCallback(cb: () => void) {
        this.updateCallbacks.push(cb);
    }

    // 移除更新回调
    static unregisterUpdateCallback(cb: () => void) {
        this.updateCallbacks = this.updateCallbacks.filter(item => item !== cb);
    }

    static getData(){
        from(["A", "B", "C", "D"]).pipe(concatMap(item => of(item).pipe(delay(10000)))).subscribe((res: any) => {
            MyDataStore.data = res;
            // 触发所有回调
            this.updateCallbacks.forEach(cb => cb());
        });
    }

    static Increment(){
        MyDataStore.counter++;
        MyService.counter++
    }
}

然后在组件中注册和销毁回调：

@Component
export default class MyForm extends Vue {
    public counter = 0;
    public store = MyDataStore;
    public service = MyService;

    mounted() {
        MyService.registerUpdateCallback(() => this.$forceUpdate());
    }

    beforeDestroy() {
        MyService.unregisterUpdateCallback(() => this.$forceUpdate());
    }

    clickBouton(){
        this.counter++;
        MyService.Increment()
        MyService.getData();
    }
}

3. 使用Vuex（适合中大型项目） #

如果后续项目规模扩大，推荐使用Vuex作为全局状态管理工具。Vuex的状态天然是响应式的，你可以将MyDataStore的状态迁移到Vuex的state中，通过mutation更新状态，组件通过映射state获取数据，状态变化时视图会自动更新。

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