mobx界面不刷新的解决方法

在一些复杂的场景，需要多个组件共同工作，这样就需要使用mbox这些组件来完成。

mobx在mobx6之后，刷新界面需要设置makeObservable(this);这个函数，这样当数据刷新后，组件的界面才能刷新。下面我们直接上代码：

 

store/index.js的代码：

import app from './modules/app.js';
 
let store={
    appStore:app
}
export default store;

 

store/modules/app.js的代码：

import { observable,action,computed,makeObservable } from 'mobx'
 
class App{
  @observable
    loadding = true;
 
    constructor(){
        makeObservable(this);//mbox 6后需要添加这个组件才会更新
    }
 
    @action.bound
　　　showLoad =()=> {
        this.loadding=true;
     }
      
    @action.bound
　　　　hideLoad= ()=> {
        this.loadding=false;
     }
    
  　 @computed 
    　　// 方法 ， 当数据改变时，它会自动执行
    　get isLoadding () {
      　return this.loadding;
     }
}
 
const app = new App()
 
export default app 

 

这里要注意的是，mobx模块类里，构造函数需要调用makeObservable(this)，让刷新生效；

@action方法需要加bound才能获取到本类的指针。

然后就是在入口文件加上store

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
 
import reportWebVitals from './reportWebVitals';
import RouterComponent from './router/index.js';
 
import store from './store/index.js'
import { Provider } from 'mobx-react';
import { configure } from "mobx"
configure({enforceActions: true})
 
ReactDOM.render(
  <Provider {...store}>
      <React.StrictMode>
        <RouterComponent />
      </React.StrictMode>
  </Provider>,
  document.getElementById('root')
);
 
reportWebVitals();

 

使用mobx的页面的代码例子：

 
import React from 'react'
import { inject,observer } from 'mobx-react'
 
@inject('appStore') @observer // 将store中的数据注入当前组件
class Goods extends React.Component{
  render () {
    const {hideLoad,showLoad} = this.props.appStore;
    return (
      <div>
        <button onClick = { hideLoad }> 隐藏 </button>
        
        <button onClick = {showLoad }> 显示 </button>
        
        <button onClick = {()=>{this.show()} }> 显示 </button>
        
        <p> count: { this.props.appStore.loadding===true?'true':'false' }</p>
        
      </div>
    )
  }
  show(){
      console.log(this.props.appStore.isLoadding);
  }
}
 
export default Goods;