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 简明教程

相关文章
|
8月前
|
Web App开发 JavaScript 前端开发
Vue.js入门介绍
Vue.js入门介绍
44 0
|
3天前
|
JavaScript 前端开发 开发者
Vue.js 基础
Vue.js 基础
8 0
|
9月前
|
JavaScript 前端开发 程序员
Vue.js学习和常用知识(一)
@[TOC](目录) Vue.js 是一个流行的 JavaScript 框架,用于构建用户界面。Vue.js 具有简单易用、灵活性强、可扩展性好、文档齐全等特点,因此在前端开发中被广泛应用。下面将从 Vue.js 的基本概念、组件、指令、计算属性、监听器、生命周期等方面进行详解。 # 一、基本概念 ## 1.1 Vue.js 简介 Vue.js 是一个流行的 JavaScript 框架,用于构建用户界面。Vue.js 具有简单易用、灵活性强、可扩展性好、文档齐全等特点,因此在前端开发中被广泛应用。Vue.js 由中国程序员尤雨溪于 2014 年创建,并于 2018 年发布了 Vue 3.0 版
|
9月前
|
JavaScript 前端开发 UED
Js和Vue的运行机制
Js和Vue的运行机制
|
9月前
|
前端开发
dva.js初识
dva.js初识
35 0
|
10月前
|
前端开发 JavaScript 开发者
手把手教你创建一个简单的React/Vue.js组件
React和Vue.js是当今最流行的前端框架之一,它们为开发者提供了创建交互式、响应式的用户界面的能力。本文将分别手把手教你创建一个简单的React和Vue.js组件,让你快速上手这两个框架,并理解它们的基本工作原理。
|
JavaScript API
js:MobX简单入门
js:MobX简单入门
|
监控 JavaScript 前端开发
框架简介之Vue.js
vue官网说:Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。 渐进式,我个人理解就是阶梯式向前。vue是轻量级的,它有很多独立的功能或库,我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染,我就只用vue的声明渲染,而我们要用他的组件系统,我们可以引用它的组件系统。
|
JavaScript
Vue.js - Vue 项目引入 JQuery 框架(上)
Vue.js - Vue 项目引入 JQuery 框架(上)
159 0
Vue.js - Vue 项目引入 JQuery 框架(上)
|
JavaScript API
Vue.js - 基础篇
Vue.js - 基础篇
101 0
Vue.js - 基础篇