mobx 簡單使用

mobx中文文檔： https://cn.mobx.js.org/

　　

安裝： 

npm install mobx --save
npm install mobx-react --save

　　

下面寫了個簡單的案例demo。

1、在入口文件寫配置

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react'    //
import store from '@/store'                   //
import Router from './router';  

ReactDOM.render(
  <Provider {...store}>    //這里注入你所需要的頁面
      <Router />
  </Provider>,
  document.getElementById('root')
)
    

　　

2、在store里建立了一個home頁面。

import { observable, action } from "mobx";
import { get } from '@/utils/request' 
import api from '@/services/api'

class Store {
  @observable name = '鐵柱'
  @observable data = []

  // 請求數據
  @action async fetch () {
    const res = await get(api.getuser)
    
    if(res.status == 200){
      this.data = res.users
    }
  }
  // 修改name值
  @action setName (option) {
    this.name = option
  }
}

const homeStore = new Store()

export default homeStore

　　

3、在store里建立了一個index頁面。

import homeStore  from './home'

export default {
  homeStore
}

　　

4、home頁面

import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'

export default 
@inject('homeStore') //你需要那個頁面的mobx 就寫那個，這個名字對應上面導出的名字
@observer
class extends Component {
  // 初始化數據
  componentDidMount () {
    this.props.homeStore.fetch()
  }

  // 修改name值
  editName = () => {
    this.props.homeStore.setName('小白')
  }
  render() {
    const { data, name } = this.props.homeStore

    return (
      <div className='page-home'>
        { name }
        <button onClick={this.editName}>修改name值</button>
        <div>
          {JSON.stringify(data)}
        </div>
      </div>
    )
  }
}