mobx一个store设计的问题

Question

看了一些例子我设计了如下store
一个页面的总store，结构如下

//    页面总的store
class store {
    @observable list: []
    @action async getData(){
        const data = await axios.get('/getgoods');
        this.list = data.map(item => new GoodsModel(this, item));
    }
}
//    每个商品的model
class GoodsModel {
    store;
    @observable price;
    @observable goodsName;
    @observable goodsImg;
    constructor(store, json){
        this.store = store;
        this.goodsName = json.goods_name;
        this.goodsImg = json.img_url;
        this.price = json.price;
    }
}

每个单个商品的model只保存了属于自己的信息，但是有时需要用到整个页面store中的数据，所有我在每个model中有一个store属性，但是这样设计在JSON.stringify()中就会报循环引用了，因为store中的list有model，model中又有store，这样相互依赖的问题如何解决呢，请问mobx还有其他的设计思路吗

Answer 1

你这样的设计是没问题的，问题在：

1. 为什么要JSON.stringify()? 你已经构建出了JS对象，页面渲染时直接通过访问对象属性即可，应该不需要JSON.stringify()。
2. 如果真的要转换成json字符串，也应该先做预处理，转换除了store以外的其他属性：price、goodsName、goodsImg。

Answer 2

我感觉modal和页面两个store就够了,公用的部分不一定要在store里面处理,在代码里面处理