[JavaScript知识库] React—— mobx-react 状态管理

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> React—— mobx-react 状态管理 -> 正文阅读

[JavaScript知识库]React—— mobx-react 状态管理

1. 安装依赖

cnpm i -S mobx mobx-react

2. 创建store/index.js
在这里插入图片描述

import {observable, computed, action , makeObservable} from "mobx";

class Store {
    constructor() {
        makeObservable(this)
    }

    /*观察的状态*/
    @observable num = 0

    /*推导值*/
    @computed get getNumDouble(){
        return this.num * 2
    }

    /*状态改变的函数*/
    @action setNum(num){
        this.num = num
    }
}

export default new Store()

3. app.js 使用Provider 包裹

import './App.css';
import Index from "./router/Index";
import {Provider} from "mobx-react";
import Store from "./store/index.js";

function App() {
  return (
    <div className="App">
        <Provider store={Store}>
            <Index></Index>
        </Provider>
    </div>
  );
}

export default App;

4. 状态显示、修改

import React from "react";
import {inject , observer} from "mobx-react";

@inject("store")
@observer
class Page1 extends React.Component{

    render() {
        return <div>
            数值：{this.props.store.getNumDouble}
            <button onClick={this.handleChange}>修改数值</button>
        </div>
    }

    handleChange =()=>{
        this.props.store.setNum(10)
    }
}

export default Page1