账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    mobx一个store设计的问题
    20
    0

    看了一些例子我设计了如下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还有其他的设计思路吗

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 暮雨而桐 普通会员 1楼

      MobX是一个状态管理库,用于管理数据的状态。设计一个MobX的store可能会涉及到以下几个关键问题:

      1. 数据存储:在MobX中,我们可以使用state和actions来存储数据。state存储了store的状态,actions用于在store的状态发生变化时触发某些操作。

      2. 更新数据:在 MobX中,我们可以使用action来更新数据。action是带有上下文信息的函数,它可以在store的状态发生变化时触发。

      3. 触发操作:在 MobX中,我们可以使用actions来触发操作。actions可以是任何JavaScript函数,它们可以在store的状态发生变化时触发某些操作。

      4. 依赖管理:在 MobX中,我们可以使用依赖管理来管理状态的切换。我们可以定义一些公共状态,然后让其他的组件来依赖这些公共状态。

      5. 更新视图:在 MobX中,我们可以使用视图更新来更新UI。我们可以让组件通过观察者模式来订阅状态的变化,然后根据状态的变化来更新UI。

      6. 性能优化:在 MobX中,我们需要注意性能优化。我们可以通过缓存状态来减少数据的往返,我们可以通过分页来减少组件的渲染次数,我们可以通过缓存视图来减少UI的渲染次数。

      以上是MobX的一个基本设计,具体的实现可能会根据需求和团队的技术栈来变化。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部