@wxa/mobx

2.5.1 • Public • Published

@wxa/mobx

NPM version npm bundle size (minified + gzip)

详细的文档

More Detail Documentation

安装

# 使用npm安装
npm i -S @wxa/mobx

用例

  1. app.js/app.wxa中引入后注册。
// app.js or app.wxa
import {App, wxa} from '@wxa/core';
import mobxPlugin from '@wxa/mobx';

wxa.use(mobxPlugin);

@App
export default class Main {};
  1. 在页面类中定义store对象。
import {Page} from '@wxa/core';

@Page
export default class Index {
    store = {
        a: 1,
        b: 2,
        c: '',
        syncData: '',
        count(){
            this.a++;
        },
        getSomeSync(){
            Api.getSomeSync().then(ret => {
                this.syncData =  'a';
            })
        }
    }
    onShow(){
        //自动绑定到appData
        conosle.log(this.data.a); // 1

        //数据变化监听
        this.$$store.count();
        conosle.log(this.data.a); // 2

        //异步监听
        this.$$store.getSomeSync();
        conosle.log(this.data.syncData); // a
    }
}
  1. 全局状态
import { observable } from 'mobx';
import Api from "@/services/api";

class userInfoStore {

    @observable name = '';
    @observable sex = '';

    getUserInfo = async () => {
        const userInfo = await Api.get();
        this.name = userInfo.name;
        this.sex = userInfo.sex;
    }

    setName(name){
        this.name = name;
    }

}

export default new userInfoStore(); //导出单例
import {Page} from '@wxa/core';
import userInfoStore from '@/store/userInfo'
@Page
export default class Index {
    store = {
        userInfoStore
    }
    onShow(){
        this.$$store.userInfoStore.getUserInfo();
        console.log(this.data.userInfoStore.name); // some name

        this.$$store.userInfoStore.setName('sb');
        console.log(this.data.userInfoStore.name); // sb
    }
}

Readme

Keywords

Package Sidebar

Install

npm i @wxa/mobx

Weekly Downloads

4

Version

2.5.1

License

MIT

Unpacked Size

19.8 kB

Total Files

10

Last publish

Collaborators

  • genuifx
  • zehuiguan
  • lucaszhu
  • fanniehuang
  • baoooooo