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;