Taro + mobx

最近在通过Taro开发小程序，踩了不少 React 、Taro 坑。其中有全局状态管理的需求。Taro 提供了许多的状态管理工具：Redux、Mobx、甚至直接新建一个 GlobalData.js进行全局状态管理都可以 ；

当前mobx已经升级到6.0版本，语法上跟 mobx5.0/4.0 有些许不一样，去除了@observer 语法糖的语法，可是当下 Taro3.3 版本中仍然使用的 5.0 的语法

全局状态管理

globalData 简易实现方案

// 在根目录下 新建 global.js 
// 通过 setGlobalData、getGlobalData 获取数据和设定数据，实现全局状态管理
const globalData = {
    counter: 0
}
export function setGlobalData (key, val) {
  globalData[key] = val
}
export function getGlobalData (key) {
  return globalData[key]
}

// 在页面引用，使用
import { setGlobalData, getGlobalData } from '../../util/global'

...
setGlobalData('counter', 1)
getGlobalData('counter')

mobx 实现方案

Taro_Mobx 官方页面

官方页面的操作指南有点老旧，部分有些坑位

1、安装 mobx依赖包

$ yarn add mobx@6.0 @tarojs/mobx @tarojs/mobx-h5 @tarojs/mobx-rn
# 或者使用 npm 
$ npm install --save mobx@6.0 @tarojs/mobx @tarojs/mobx-h5 @tarojs/mobx-rn

另外安装：
// 官网的 mobx@4.8 版本的，而实际操作是需要 mobx@6.0 版本才可以；
npm install --save mobx-react

2、创建 observer 对象（store 储存的地方）

// 新建 global.js
import { observable } from 'mobx'

const Store = observable({
    counter: 1,
    res(){
        return this.counter * 2;
    },
})

export default Store

3、在App.tsx 挂载 mobx

// 这里还有一个坑，通过官方脚手架下载的 Taro 项目，主文件名：`app.ts` ,要手动改成 `app.tsx`；否则 挂载 provider 的时候会报错；
import { Component } from 'react'
import './app.scss'
import "taro-ui/dist/style/components/index.scss"
import './custom-theme.scss'
import { Provider } from 'mobx-react';  // 引入 Provider，记得是 from 'mobx-react'
import Store from './store/global'   // 引入 mobx 的 store

const store = {Store}   // 存成一个变量
class App extends Component {
  // this.props.children 是将要会渲染的页面
  render() {
    return (
      <Provider store={store}>  // 通过 provider 进行挂载
        {this.props.children}
      </Provider>

    )
  }
}

export default App

4、页面引用

//  引用，注意 from 'mobx-react'
import {observer, inject} from 'mobx-react';

@inject('store')
@observer
class dialogPage extends Component{
  ...
  // 使用
  const {Store } = this.props.store
  console.log('mobx:',Store.res())
}