关于使用mobx作为游戏状态管理工具demo

项目地址 https://github.com/oyb81076/cocos-mobx-demo

将 mobx 作为 cocos creator 项目状态管理的demo

说明

mobx 本来是 react 的一个状态管理工具, 其实也可以用来作为cocos的状态管理工具

使用 mobx 作为状态管理, 可以实现组件之间完全的解耦

使用前

@ccclass
class ComponentA extends cc.Component {
    @property(ComponentB) componentB: ComponentB
    onClick1(){
        this.componentB.do()
    }
    onClick2(){
        this.componentB.undo()
    }
}

@ccclass
class ComponentB extends cc.Component {
    _doing = false
    do(){
        if (!this._doing) { //为了防止重复调用可能引发副作用, 这里要做一次检查
            this._doing = true
            // do it
        }
    }
    undo(){
        if (this._doing) {
            this._doing = true
            // undo it
        }
    }
}

使用状态工具后

class Store {
    @observable doing = false
}
const store = new Store

@ccclass
class ComponentA extends cc.Component {
    @action
    onClick1(){
        store.doing = true
    }
    @action
    onClick2(){
        store.doing = false
    }
}


@ccclass
@observer
class ComponentB extends cc.Component {
     /**
     * 根据store.doing 的值渲染组件
     * @render 所注解的方法, 会在onLoad之后自动执行一遍
     * 如果函数执行期间所调用的 被 @observable 注解的数据发生了任何改变, 函数就会被重新执行
     */
    @render
    renderDoing(){
        if (store.doing) {
            // do it
        } else {
            // undo it
        }
    }
}

整个程序的逻辑转化为
组件A <–> 数据 <–> 组件B

  • 解耦之后, 组件之间不再需要互相引用, 几乎不存在组件之间进行互相操作
  • 组件变成无状态的, 只需要单纯的根据外部数据来进行渲染, 不用关心初始化上下文等等问题
  • 用户操作或者服务器推送的时候, 直接修改数据即可, 组件会在观测数据发生改变的时候自动重新渲染
  • 在组件树变得庞大的时候, 如果使用状态工具, 由于不存在组件间的调用问题, 结构相对简单
  • 因为组件自身完全独立, 所以方便制作成prefab进行加载, 将prefab直接挂在到节点上即可, 而不需要进行多余的操作
  • 当组件制作成渲染的工具的时候, 可以很方便的替换, 加载, 移除
7赞

感谢,你要早点发出来
我就不用mvc架构了
感觉你那个更轻量

mark 先试下好不好用

不错打开了一扇门

游戏里还是别用mvc了,到后面会想死。。

何出此言啊?

store.doing 会一直do

mark

mark

mark

mark

试了一下mobx,在组件onLoad里autorun就可以响应状态变化
楼主的mobx-cocos主要增加了什么功能?本菜没看懂源码

MARK

不应该是不用到后面会想死吗