重构Vuex Store为async/await后，组件计算属性不再响应状态变更

问题 #

将Vuex Store从Promise方式重构为async/await风格后，组件中的计算属性失去了动态响应性。

旧实现（Promise风格）：

// 旧实现方式
getCurrentUser({commit}) {
  return new Promise((resolve, reject) => {
    usersService.current()
    .then(
        user => { 
            commit('setUserId', user.id)
            User.insert({data: user})
            resolve(user)
        },
        error => reject(error)
   )
  })
}

新实现（async/await风格）：

// 新实现方式
async getCurrentUser({ dispatch, commit }) {
  const response = await handleApiAction({
    dispatch,
    record: false,
    action: () => usersService.current(),
    modelClass: User,
  });
  return commit('setUserId', response.id)
}

组件中依赖该状态的计算属性：

// 依赖上述服务API调用的组件代码
computed: {
  notifications() {
    return Notification.query()
      .where('target_type','User')
      .where('target_id', this.current_user_id)
      .orderBy('created_at', 'desc').get()
  },
  current_user_id() {
    return this.$store.state.users.current_user.id
  }
}

Chrome Vue插件显示state值已正确设置，但current_user_id计算属性无法返回有效值，导致Notifications无法加载，计算属性未收到状态更新通知。

解决方案 #

1. 检查setUserId mutation的更新逻辑 #

计算属性依赖state.users.current_user.id，但你的mutation名为setUserId，需确认它确实在更新current_user对象的id字段，而非单独的userId字段。正确的mutation示例：

mutations: {
  setUserId(state, userId) {
    // 确保是更新current_user对象的id，而非其他无关字段
    state.current_user = { ...state.current_user, id: userId };
    // 若需要替换整个current_user对象：
    // state.current_user = { id: userId, ...其他必要属性 };
  }
}

如果mutation仅更新了state.userId而非state.current_user.id，计算属性自然无法感知到变化。

2. 调整async/await action的返回值 #

新实现中return commit('setUserId', response.id)是多余的，因为commit本身返回undefined。建议去掉return，或保持和旧逻辑一致返回用户数据：

async getCurrentUser({ dispatch, commit }) {
  const response = await handleApiAction({
    dispatch,
    record: false,
    action: () => usersService.current(),
    modelClass: User,
  });
  commit('setUserId', response.id);
  return response; // 和旧实现一致返回用户数据
}

3. 用Vuex getter替代直接访问state #

直接访问$store.state虽可行，但使用getter能更好封装状态逻辑，同时确保响应性，还能处理空值情况：

// 在Vuex的users模块中定义getter
getters: {
  current_user_id: state => state.current_user?.id || null
}

// 组件中调用getter
computed: {
  current_user_id() {
    return this.$store.getters['users/current_user_id']
  },
  // ...其他计算属性
}

4. 确保current_user初始值的响应性 #

如果state.users.current_user初始值为null或undefined，后续赋值时要保证是响应式更新。比如初始化state时：

state: {
  current_user: { id: null } // 初始化为带id字段的空对象
}

若初始为null，mutation中需直接替换为完整对象，而非仅修改属性（Vue无法检测从null变为对象后的属性添加）。

5. 验证handleApiAction的返回数据 #

确认handleApiAction确实返回了包含id的response对象，可在action中添加日志验证：

async getCurrentUser({ dispatch, commit }) {
  const response = await handleApiAction({
    dispatch,
    record: false,
    action: () => usersService.current(),
    modelClass: User,
  });
  console.log('API返回数据', response); // 验证response结构是否正确
  commit('setUserId', response.id);
  return response;
}

内容的提问来源于stack exchange，提问作者bo-oz