Taro+TypeScript - Mobx实践

前言

    在使用Mobx中，可以使用componentWillReact（生命周期钩子）,当组件计划re-render (数据发生变换，页面进行渲染的时候)时会触发.

使用observable、@observable (Taro中官网实例化)

    1、在store下新建counter.ts

import { observable } from 'mobx'

// 创建的是实例对象
const counter = observable({
  counter: 0,
  counterStore() {
    this.counter++
  },
  increment() {
    this.counter++
  },
  decrement() {
    this.counter--
  },
  incrementAsync() {
    setTimeout(() => {
      this.counter++
    }, 1000)
  }
})
export default counter

    在store下新建price.ts

import { observable, action } from 'mobx'

export default class Price {
  @observable price: number = 0

  @action.bound setPrice (price: number) {
    this.price += price
  }
}

    2、在app.tsx中导入

import counter from './store/counter'
// 声明store
const store = {
  counter,
  price: new Price() // 注意此处生成实例
}
class App extends Component {render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }
}

    3、使用

import { observer, inject } from '@tarojs/mobx'

type propsType = {
  price: {
    price: number,
    setPrice: Function
  },
  counter: {
    counter: number,
    increment: Function,
    decrement: Function,
    incrementAsync: Function
  }
}

type stateType = {
}

interface Index {
  props: propsType,
  state: stateType
}


@inject('count', 'counter')
@observer
class Index extends Component {
    constructor(props) {
        super(props)
            this.state = {
        }
    }  
  // mobx数据改变进行渲染函数（）
  componentWillReact () {}
  increment = () => {
    const { counter } = this.props
    counter.increment()
  }

  decrement = () => {
    const { counter } = this.props
    counter.decrement()
  }

  incrementAsync = () => {
    const { counter } = this.props
    counter.incrementAsync()
  }
  setPrice () {
    const { price: { setPrice } } = this.props
    setPrice(1)
  }
  
  render () {
    const {counter: { counter }, price: { price } } = this.props
    return (
      <View className='index'>
        <Button onClick={this.increment}>+</Button>
        <Button onClick={this.decrement}>-</Button>
        <Button onClick={this.incrementAsync}>Add Async</Button>
        <Text>{counter}</Text>
        <Button onClick={this.setPrice}>点击</Button>
        <Text>现在价格为：{price}</Text>
      </View>
    )
  }
}

工程化实例

    在store下新建counter.ts

import { observable, action } from 'mobx'

export default class Counter {
  @observable counter:number =  0
  @action.bound counterStore() {
    this.counter++
  }
  @action.bound increment() {
    this.counter++
  }
  @action.bound decrement() {
  this.counter--
}
  @action.bound incrementAsync() {
    setTimeout(() => {
      this.counter++
    }, 1000)
  }
}

    新建price.ts

import { observable, action } from 'mobx'

export default class Price {
  @observable price: number = 0

  @action.bound setPrice (price: number) {
    this.price += price
  }
}

    新建index.ts

import Counter from './counter'
import Price from './price'

export default {
  Counter: new Counter(),
  Price: new Price()
}

    在app.tsx使用

import store from './store'
class App extends Component {render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }
}

     在pages下新建mobx

import { ComponentType } from 'react'
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'

type propsType = {
  price: {
    price: number,
    setPrice: Function
  },
  counter: {
    counter: number,
    increment: Function,
    decrement: Function,
    incrementAsync: Function
  }
}

type stateType = {
}

interface Index {
  props: propsType,
  state: stateType
}


@inject('price', 'counter')
@observer
class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }
  config: Config = {
    navigationBarTitleText: 'mobx'
  }  
  // mobx数据改变进行渲染函数（）
  componentWillReact () {}
  
  increment = () => {
    const { counter } = this.props
    counter.increment()
  }

  decrement = () => {
    const { counter } = this.props
    counter.decrement()
  }

  incrementAsync = () => {
    const { counter } = this.props
    counter.incrementAsync()
  }
  setPrice() {
    const { price: { setPrice } } = this.props
    setPrice(1)
  }

  render() {
    const { counter: { counter }, price: { price } } = this.props
    return (
      <View className='index'>
        <Button onClick={this.increment}>+</Button>
        <Button onClick={this.decrement}>-</Button>
        <Button onClick={this.incrementAsync}>Add Async</Button>
        <Text>{counter}</Text>
        <Button onClick={this.setPrice}>点击</Button>
        <Text>现在价格为：{price}</Text>
      </View>
    )
  }
}

export default Index as ComponentType