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

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