,可以通过以下步骤实现:
import React from 'react';
import { makeObservable, observable, action } from 'mobx';
import { observer } from 'mobx-react';
class MyStore {
// 定义需要观察的状态
@observable count = 0;
// 定义操作
@action increment() {
this.count++;
}
@action decrement() {
this.count--;
}
}
// 使用makeObservable函数将状态和操作绑定到存储实例上
makeObservable(MyStore);
const MyComponent = observer(() => {
const store = new MyStore();
return (
<div>
<h1>Count: {store.count}</h1>
<button onClick={() => store.increment()}>Increment</button>
<button onClick={() => store.decrement()}>Decrement</button>
</div>
);
});
在上述代码中,我们创建了一个名为MyStore
的存储实例,并定义了一个名为count
的可观察状态和两个操作increment
和decrement
。然后,在React函数组件MyComponent
中,通过observer
函数将组件包裹起来,使其能够观察存储实例的状态变化,并在组件中使用存储实例的状态和操作。
这样,当count
状态发生变化时,MyComponent
会自动重新渲染,并显示最新的状态值。用户点击"Increment"和"Decrement"按钮时,对应的操作会被调用,从而更新count
状态的值。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。腾讯云云服务器提供可靠、高性能的云计算服务,可满足各种规模的应用需求;腾讯云云数据库MySQL是一种高性能、可扩展的关系型数据库服务,适用于各种在线应用场景。
腾讯云云服务器产品介绍链接地址:https://cloud.tencent.com/product/cvm 腾讯云云数据库MySQL产品介绍链接地址:https://cloud.tencent.com/product/cdb_mysql
T-Day
云+社区技术沙龙[第22期]
DB・洞见
云+社区技术沙龙[第8期]
云+社区技术沙龙[第1期]
云+社区技术沙龙[第20期]
云+社区技术沙龙[第7期]
北极星训练营
云+社区技术沙龙 [第31期]
Hello Serverless 来了
云+社区技术沙龙[第25期]
领取专属 10元无门槛券
手把手带您无忧上云