React中使用Mobx6的方法

1.创建一个store主仓库

// sotre/index.ts

//我们创建的user的分仓库
import UserStore, { User } from './user/user'

const user = new UserStore()

// 定义仓库类型
export interface StoreType {
    user: User
}


const stores: StoreType = {
    user
}

export default stores

2.在main的ts中引入主仓库

import { Provider } from 'mobx-react'
import stores from './store/index'

// 需要拿Provider来包裹
ReactDOM.render(
  <Provider {...stores}>
    <App />
  </Provider>,
  document.getElementById('root')
)

3.编写user仓库

// user/user.ts
import { makeAutoObservable } from 'mobx';

export interface User {
    name: string
    password: string
    userInfo: string
    loginAction: (payload: { name: string, password: string }) => void
}

class UserStore implements User {
    // state
    name = ''
    password = ''

    constructor() {
        // 观察全部数据
        makeAutoObservable(this)
    }
    // getter
    get userInfo() {
        return this.name + '' + this.password
    }

    // action
    loginAction(payload: { name: string; password: string; }): void {
        this.name = payload.name
        this.password = payload.password
        console.log(this)
        console.log('登录成功')
    }
}

export default UserStore

4.将action的方法抽离

// 创建一个actions的文件
export default class actions {
    loginAction(payload: { name: string; password: string; }): void {
        this.name = payload.name
        this.password = payload.password
        console.log(this)
        console.log('登录成功')
    }
}

// 导入 actions 的同时改写user.ts中的方法格式
import actions from './actios'

loginAction(payload: { name: string, password: string }) { }

// 同时实现 actios
class UserStore implements User, actions

// 创建一个mixin混入函数
function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name]
        })
    })
}

// 将actions 放到 user类中
applyMixins(UserStore, [actions])

5.在页面中使用store

import React from 'react'
import { inject, observer } from 'mobx-react'
import { StoreType } from './store/index'

function App({ user }: StoreType) {

  const login = () => {
     // 使用actions
    user.loginAction({ name: 'zs', password: '123456789' })
  }

  return (
    <div>
      <div>
          {* 使用state数据 *}
        <p>UserInfo:{user.name}</p>
        <p>{user.password}</p>
        <p>getter: {user.userInfo}</p>
      </div>
      <div>
        <button onClick={login}>登录</button>
      </div>
    </div>
  )
}

export default inject('user')(observer(App))