MobX基础 ----- 类的静态属性和装饰器

Posted 2020-11-20 samweb

　　当我们使用MobX的时候，首先要声明一个store, 用来保存状态，它的最基本的语法 如下：

class Todo {
    @observable title = "";
    @observable finished = false;
}

　　其中 @observable 是装饰器写法， title= ‘‘ 是实例属性的新的写法，这两个语法，都是es7 中的提案，但都没有被采纳， 之所以被使用，是因为有babel 时进行转译。

　　首先看一下类的实例属性的新写法， 这是ES7 中关于静态属性的一个提案， 在这个提案对实例属性和静态属性， 都规定了新的写法。

　　1，对于实例属性来说， 如果在使用的时候，就要对它进行初始化，那么可以直接在类的定义中用赋值方式进行初始化。

class Car {
    color = ‘red‘;
}

　　这样，我们就声明了一个实例属性color，并且它的初始值为 ‘red‘;  如果用以前的写法，我们要在类中定义constructor构造函数，然后在构造函数中写实例属性，

class Car {
    constructor() {
        this.color = ‘red‘;
    }
}

　　可以发现，新的ES7 提案，大大简化了写法。

　　2， 不光是实例属性，实例方法也可以用这种赋值的方法进行初始化， 如果学习过react, 你可以已经见过这种写法了。

class Car {
    color = ‘blue‘;
    // 直接用赋值的方法，对实例方法进行初始化
    getColor = () => {
        return this.color;
    }
}

　　3， 静态属性就是在实例属性的前面加上static关键字， 它表示这个属性属于整个类，用类名加属性名进行读取。

class Car {
    static country = ‘china‘;
}

　　4，静态方法，就是在方法前面加上static, 也示表示它属于这个类。

class Car {
    static country = ‘china‘;
    static getCountry = () => {
        return Car.country;
    }
}

　　由于现在没有浏览器支持，所以我们要用babel 进行转译，需要配置webpack 环境。这里使用webpack4，因为它提供了一个零配置，可以