mobx的基本使用

最新推荐文章于 2025-03-22 22:30:11 发布

仙古.梦回～

最新推荐文章于 2025-03-22 22:30:11 发布

阅读量357

点赞数 8

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_55139096/article/details/139666276

版权

文档地址：mobx中文文档

安装mobx及mobx-react-lite插件

npm install mobx mobx-react-lite

基本使用(store.js文件) 模块state

import {  observable } from "mobx"

 const store = observable({
      value:0,
 })


export default store

Home组件中使用 模块actions(所有的事件处理函数都必须使用action包裹)

import styles from './profile.module.less'

//导入action
import { action } from "mobx"
//导入观察器
import { observer } from "mobx-react-lite"
import  store  from '@/store'

function Home(){

    return (
        <div className={ styles.root }>
           <div className="home">
                 {store.value}
                  //数据的变更必须用action包裹
                 <Button onClick={ action(()=>store.value++) }>修改</Button>
           </div>
        </div>
    )
}

//使用observer触发视图更新
export default observer(Home)

计算属性 computed

import styles from './profile.module.less'

//导入computed
import { action,computed } from "mobx"
//导入观察器
import { observer } from "mobx-react-lite"
import  store  from '@/store'

function Home(){
    //计算属性：注意必须带有这个get()，否则会无法获取计算值
    const value = computed(()=>store.value+1).get()
    return (
        <div className={ styles.root }>
           <div className="home">
                   //原始数据        0   
                   {store.value} 
                   //computed数据    1
                   { value }   
                  //数据的变更必须用action包裹
                 <Button onClick={ action(()=>store.value++) }>修改</Button>
           </div>
        </div>
    )
}

//使用observer触发视图更新
export default observer(Home)