Magix.State介绍

[xinglie]

Magix.State

用于在magix项目中共享数据，并具备与Magix.Router类似的功能：可以在view中方便的监听，同时当Magix.State中的数据变化时，与Magix.Router派发地址变化事件一样的从根view到子view依次派发数据变化的事件

API

view.observeState

用于监听Magix.State中的数据变化

let Magix = require('magix');
module.exports = Magix.View.extend({
    init() {
        this.observeState('abc,def');//监听Magix.State中数据key为abc及def的变化，当abc或def有变化时，view的render方法被调用
    },
    render() {
        console.log('view render');
    }
});

Magix.State.get

从Magix.State中获取数据

let Magix = require('magix');
module.exports = Magix.View.extend({
    init() {
        this.observeState('abc,def');
    },
    render() {
        let state = Magix.State.get(); //不传key，获取整个state
        console.log(state);
        let abcState = Magix.State.get('abc'); //获取abc这个数据
        console.log(abcState);
    }
});

Magix.State.set

设置Magix.State中的数据，同时从根view到子view派发数据变化的事件

let Magix = require('magix');
module.exports = Magix.View.extend({
    init() {
        this.observeState('abc,def');
    },
    render() {
        console.log('view render');
    },
    'test<click>' () {
        Magix.State.set({
            abc: Math.random();
        }, true);//set接收2个参数，第一个参数为要设置的数据对象，第二个为是否静默设置，如果为true，则只设置数据，不派发变化的事件
        Magix.State.set({
            def: Math.random();
        });
    }
});

Magix.State.has

获取Magix.State是否有指定key的数据

let Magix = require('magix');
module.exports = Magix.View.extend({
    init() {
        this.observeState('abc,def');
        if (!Magix.State.has('abc')) { //设置初始值
            Magix.State.set({
                abc: -1
            }, true);
        }
    },
    render() {
        console.log('view render');
    }
});

[xinglie]

事件

changed

当Magix.State中的数据有变化时触发

let Magix = require('magix');
module.exports = Magix.View.extend({
    init() {
        Magix.State.on('changed', function(e) {
            console.log(e.type, e.keys); //keys是哪些有变化的key集合对象
        });
    },
    render() {
        console.log('view render');
    }
});

[gmfenglin]

代码没同步更新上去

[xinglie]

拆分set方法

行为上Magix.State与Magix.Router一致，API上与Magix.Updater一致，因此原有的Magix.State.set方法拆分成set与digest方法

Magix.State.set方法

设置Magix.State中的数据，仅设置数据，不再派发事件

let Magix = require('magix');
module.exports = Magix.View.extend({
    init() {
        this.observeState('abc,def');
    },
    render() {
        console.log('view render');
    },
    'test<click>' () {
        Magix.State.set({
            abc: Math.random();
        });
        Magix.State.set({
            def: Math.random();
        });
    }
});

可以通过set方法反复多次调用　

Magix.State.digest方法

检测是否有数据变化，然后派发changed事件

let Magix = require('magix');
module.exports = Magix.View.extend({
    init() {
        this.observeState('abc,def');
    },
    render() {
        console.log('view render');
    },
    'test<click>' () {
        Magix.State.set({
            abc: Math.random();
        });
        Magix.State.set({
            def: Math.random();
        });
        Magix.State.digest();//多次设置，统一派发事件
        // 如果即设置数据又派发事件，可以与Magix.Updater一样简写为
        Magix.State.digest({
            def: Math.random();
       });
    }
});

[xinglie]

@gmfenglin 代码未动，文档先行

[gmfenglin]

dist 目录下的cmd 版本view 的share和getShare方法没有了，用什么代替？

[gmfenglin]

tmpl 目录下的view 存在share和getShare方法.

[xinglie]

@gmfenglin https://github.com/thx/magix/blob/master/tool/gulpfile.js#L11 克隆下来，修改打包工具enableModules增加share，然后重新打包即可，即调用gulp combine任务，然后再gulp compress压缩

目前设计了Magix.State，从共享数据这个功能，Magix.State的功能比share更适合项目中使用，所以默认我就不再打包share模块了，你可以自己打包的