Vuex类模块继承问题：GrandchildModule无法继承需API请求的状态

核心原因 #

Vue2的响应式靠Object.defineProperty实现，只有初始化时就存在的属性会被处理成响应式。你这里ChildModule通过API异步获取的状态是实例化后才添加的，这些属性没被Vue标记为响应式，GrandchildModule继承时自然拿不到能触发响应的状态，getters也就追踪不到数据变化了。

具体解决办法 #

1. 提前声明所有需要响应式的状态 #

在ChildModule（或BaseModule）里，把所有要异步获取的状态提前声明并设默认值，确保Vue实例化时能将其转化为响应式：

class ChildModule extends BaseModule {
  constructor() {
    super();
    // 预定义异步状态，让Vue初始化时处理成响应式
    this.asyncState = null;
  }

  async fetchData() {
    const res = await apiCall();
    // 直接修改预定义的响应式属性
    this.asyncState = res.data;
  }
}

2. 用Vue.set添加动态属性（无法预定义时使用） #

如果没法提前知道所有属性，添加异步获取的状态时用Vue.set确保属性是响应式的：

import Vue from 'vue';

class ChildModule extends BaseModule {
  async fetchData() {
    const res = await apiCall();
    // 通过Vue.set添加响应式属性
    Vue.set(this, 'asyncState', res.data);
  }
}

3. 孙类getters依赖响应式属性 #

GrandchildModule的getters要直接依赖父类已被标记为响应式的属性，而非未处理的动态属性：

class GrandchildModule extends ChildModule {
  get computedState() {
    // 依赖父类的响应式asyncState
    return this.asyncState ? this.asyncState.filter(item => item.active) : [];
  }
}

4. 控制实例化与数据获取的顺序 #

先让ChildModule完成数据获取，再实例化GrandchildModule，确保孙类能拿到已初始化的响应式状态：

// 正确执行顺序
const child = new ChildModule();
await child.fetchData();
const grandchild = new GrandchildModule();
// 此时grandchild可正常获取响应式的asyncState

重点提醒 #

Vue2不支持动态添加根级响应式属性，要么初始化时就声明，要么用Vue.set添加。用类继承做状态管理时，别在实例化后直接添加未预定义的属性，否则会脱离Vue的响应式追踪。

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