js:MobX简单入门-阿里云开发者社区

开发者社区> 开发者小助手-bz> 正文

js:MobX简单入门

简介: js:MobX简单入门
+关注继续查看

MobX 核心 API :

  • 定义状态(observable)
  • 响应状态(autorun, computed)
  • 修改状态(action)
import { observable, autorun, computed, action } from 'mobx';

// 1. 定义状态
const store = observable({
  count: 0,
});

// 2. 响应状态

// 计算值
const count10 = computed(() => {
  return 10 * store.count;
});

// 定义响应函数
autorun(() => {
  console.log('count:', store.count, count10.get());
});

// 3. 修改状态
// 方式一:直接修改状态
store.count += 1;
store.count += 1;
store.count += 1;

// 方式二:显式修改状态
const increase = action(() => store.count++);
increase();

参考

MobX 简明教程

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一文快速搞定Redis_数据类型及JavaApi操作
大家好,我是**ChinaManor**,直译过来就是中国码农的意思,我希望自己能成为国家复兴道路的铺路人,大数据领域的耕耘者,平凡但不甘于平庸的人。
9 0
计算机基础2 | 学习笔记
快速学习计算机基础2。
11 0
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)
7 0
Vue 仿钉钉流程图(流程节点绘制 vue+Ant【如果用其他UI库需要替换几个组件】 附 demo)
# [这里是git地址](https://gitee.com/xiaoyaoluntian/imitating-dingding-flow-chart/tree/comdemo/)
6 0
数据类型-数值和字符串 | 学习笔记
快速学习数据类型-数值和字符串。
5 0
作用域及作用域链 | 学习笔记
快速学习作用域及作用域链。
5 0
代码注释 | 学习笔记
快速学习代码注释。
9 0
求数组元素的和 | 学习笔记
快速学习求数组元素的和。
6 0
函数的返回值 | 学习笔记
快速学习函数的返回值。
6 0
函数当作参数2 | 学习笔记
快速学习函数当作参数2。
6 0
1569
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载