MobX 安装基础使用

最新推荐文章于 2024-04-11 19:51:26 发布

_Fluoxetine

最新推荐文章于 2024-04-11 19:51:26 发布

阅读量194

点赞数

文章标签：前端 sass yarn react vue

本文链接：https://blog.csdn.net/Fluoxet_i_ne/article/details/119752021

版权

本文详细介绍了如何一步步安装和使用MobX，从第一步添加MobX和mobx-react依赖，到处理@报错，再到配置package.json，最后展示在React子页面中如何使用MobX的observer和inject。

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

安装第一步

yarn add mobx

第二步

yarn add mobx-react
mobx 和 react 关联起来用的一个包

router.js 新增代码

// 引入 mobx和react 绑定的包
import { Provider } from 'mobx-react';

// 引入store.js  要引入对应的store的文件
import FirstStore from './store/store';

// 对应使用 第一种 或 第二种 方式

// 第一种 只能传递一个
// const FStore = new FirstStore()

// 第二种 要使用 store 要new 的
const stores = {
  FStore: new FirstStore(),
  newStore：mew NewStore(),
  newStore1：mew NewStore1(),
}

// 把 App 包裹起来 叫入口的注入
    {/* 直接获取里面  ...stores */}
    <Provider {...stores}>
      <App />
    </Provider>

第三步

这时候启动项目会报错 @ 不支持

在这里插入图片描述

需要安装两个命令
yarn add @babel/plugin-proposal-decorators
yarn add @babel/plugin-proposal-class-properties

第四步

修改
package.json

"babel": {
"presets": [["react-app"],
["@babel/preset-react"]],
"plugins": [["@babel/plugin-proposal-decorators",
{"legacy": true}],
["@babel/plugin-proposal-class-properties",
{"loose": true}
]]}}

第五步

任意子页面使用 mobx
-1.import {withRouter} from ‘react-router-dom’
-2.import { observer,inject } from ‘mobx-react’;
-3.
@withRouter
@inject(‘FStore’)
@observer
-4.this,props