mobx的简单使用,observable,computed,action

究极无敌战神

于 2024-03-12 21:34:17 发布

阅读量430

点赞数 8

分类专栏： React 文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/WKJYC/article/details/136663899

版权

React 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了在React项目中集成mobx，创建store，配置Babel支持装饰器，以及在组件中使用mobx进行数据操作的过程。

摘要由CSDN通过智能技术生成

毕业后第一次~~原公司倒闭~~换公司，第一个学习的项目用到mobx，特地写个日记记录在react中的使用

yarn add mobx
yarn add mobx-react
yarn add @babel/plugin-proposal-decorators

//package.json中babel添加 @babel/plugin-proposal-decorators
"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ]
  }

// mobx创建一个store
import { observable, computed, action, makeObservable } from "mobx";
class MobxStore {
  username = 'water'
  @observable userage = 24
  @observable usernick = '水王'
  @observable userlist = ['水王', '水鬼']

  @computed get getUserList () {
    return this.userlist
  }

  @computed get getUserAge () {
    return this.userage
  }

  @action updateUserAge(newValue) {
    this.userage = newValue
  }
  @action pushUserlist(newValue) {
    this.userlist = [ ...this.userlist, newValue ]
  }
  constructor() {
    makeObservable(this)
  }
}

export default MobxStore

// 创建一个对象收集全部仓库
import MobxStore from "./userMobX";
const mobxStore1 = new MobxStore()
const mobxStores = {
  mobxStore1
}
export default mobxStores

// index.js中导入provier和仓库合集
import { Provider } from 'mobx-react'
import mobxStores from './mobx';
....


root.render(
  <React.StrictMode>
    <Provider {...mobxStores}>
      <App />
    </Provider>
  </React.StrictMode>
);

// 页面使用mobx的数据和修改
import React from 'react'
import { inject, observer } from 'mobx-react'
const MobXOut = (props) => {
  const { mobxStore1 } = props
  return(
    <div>
      '我是mobx'{mobxStore1.getUserAge}
      {JSON.stringify(mobxStore1.getUserList)}
      <button onClick={() => {mobxStore1.updateUserAge(666)}}>mobx修改state</button>
      <button onClick={() => {mobxStore1.pushUserlist('demo')}}>mobx添加userlist</button>
    </div>  
  )
}
export default inject('mobxStore1')(observer(MobXOut))