mobx react状态管理 2 action

最新推荐文章于 2024-01-25 07:00:00 发布

前端&&&辞耳

最新推荐文章于 2024-01-25 07:00:00 发布

阅读量168

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_56042698/article/details/129013682

版权

1、为了防止在组件中随意修改状态值（store），引入了action

2、代码，在组件中只能调用store中特定的方法来修改特定的值

//mobx.js
import{observable,action} from 'mobx'
var store = observable({   //对于对象类型数据的监听 观察 
    id:5,
    name:'辞耳',
    age:18,
    changeage(){
        this.age = 66
    },
    changename(){
        this.name = '懵逼'
    }
},{
    changeage:action,  //标记方法是action，专门用来修改可观测的value
    changename:action
})
export default store;  


//app.js

import React, { Component } from 'react'
import store from 'mobx'

export default class app extends Component {
    componentDidMount(){
        console.log(store.name)  //辞耳
        sutorun(()=>{
            console.log(store.name) //辞耳  懵逼
        })
        store.changename()
        
    }
  render() {
    return (
      <div>app</div>
    )
  }
}