Mobx带参数@computed函数实现：React Native收藏功能优化问询

嘿，作为Mobx新手能把React Native + Mobx + mobx-persist的应用跑起来还成功拉取WordPress文章，已经超棒啦！针对你想优化的收藏功能，带参数的@computed能帮你更优雅地处理「判断文章是否已收藏」这类场景，下面我来给你具体说明怎么实现：

核心思路：用闭包实现带参数的@computed #

Mobx原生的@computed装饰器本身不直接支持传入参数，但我们可以让computed属性返回一个接收参数的函数，利用闭包访问store里的observable数据，这样就能实现“带参数的计算属性”效果。

你的PostsStore修改示例 #

结合你现有的代码，我们可以添加一个用来判断单篇文章是否已收藏的computed，同时优化收藏/取消收藏的action：

import { observable, computed, action } from 'mobx';
import { persist } from 'mobx-persist';

export default class PostsStore {
  // 你已有的 observables 和持久化配置
  @observable isLoading = true;
  @persist('list') @observable posts = [];
  @persist('list') @observable favorites = [];

  // 带参数的computed：判断指定ID的文章是否在收藏夹中
  @computed get isPostFavorite() {
    // 返回一个接收postId的函数，闭包访问this.favorites
    return (postId) => {
      // 假设你的文章对象有唯一id字段（比如WordPress的post ID）
      return this.favorites.some(favPost => favPost.id === postId);
    };
  }

  // 优化后的添加收藏action
  @action addToFavorites = (post) => {
    // 先通过computed判断是否已收藏，避免重复添加
    if (!this.isPostFavorite(post.id)) {
      this.favorites.push(post);
    }
  };

  // 优化后的取消收藏action
  @action removeFromFavorites = (postId) => {
    this.favorites = this.favorites.filter(post => post.id !== postId);
  };

  // 你其他的现有方法...
}

在React Native组件中使用 #

在你的文章列表或详情组件里，就可以直接调用这个带参数的computed来渲染收藏状态，比如：

// 假设你通过inject把PostsStore注入到组件中
const PostItem = ({ post, postsStore }) => {
  const isFavorite = postsStore.isPostFavorite(post.id);
  
  return (
    <View>
      {/* 文章内容... */}
      <TouchableOpacity
        onPress={() => {
          if (isFavorite) {
            postsStore.removeFromFavorites(post.id);
          } else {
            postsStore.addToFavorites(post);
          }
        }}
      >
        <Text>{isFavorite ? '取消收藏' : '添加到收藏夹'}</Text>
      </TouchableOpacity>
    </View>
  );
};

为什么这样做更优？ #

• 逻辑封装：把“判断是否收藏”的逻辑放在store里，组件不用自己处理数组查找，代码更简洁
• 响应式自动更新：当favorites数组变化时，isPostFavorite的返回结果会自动更新，组件会重新渲染最新的收藏状态，完全不用手动管理状态
• 避免重复代码：所有需要判断收藏状态的地方都可以复用这个computed，不用重复写some或find逻辑

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