一篇文章让你快速上手Mobx6

安装

第一步是先是安装npm包，分别需要安装两个包，第一个包是mobx（直接安装最新版本即可）,第二个包是mobx-react-lite（此包是用来关联React与mobx的），达到数据状态管理的趋势。

npm i mobx mobx-react-lite

基础语法

创建一个store/dmeo.ts文件，在mobx内部引入makeAutoObservable进行数据的响应式管理；

直接上代码：

import { makeAutoObservable } from 'mobx'

export default class useMobxStore {

  count: number = 0 // 初始化状态数据
  
  constructor() {
    // 对初始化数据进行响应式处理
    makeAutoObservable(this)
  }

  // 设置改变初始化数据方法
  addCount = () => { 
    this.count++
    console.log(this.count)
  }
}

组件内部使用：

import React from 'react'
import { observer } from 'mobx-react-lite' // 从mobx-react-lite内部引入observer让mobx与react进行关联
import useMobxStore from '@/store'

const MobxDemo = () => {
  return (
    <div>
      <h2>{useMobxStore.count}</h2>
      <button onClick={useMobxStore.addCount}>+1</button>
    </div>
  )
}

export default observer(MobxDemo) // 对组件进行mobx与react的关联绑定

上面两步完成之后，便可以去页面试一下效果了，这个是mobx的基础使用，是不是比Redux简单非常之多；

mobx持久化

我们平时开发当中，一些数据需要进行持久化存储，当然mobx也贴心的为我们准备了mobx-persist-store这个npm包进行快速便捷的本地化存储；

makePersistable 完成快速本地化存储：

import { makeAutoObservable } from 'mobx'
import { makePersistable } from 'mobx-persist-store' // 引入makePersistable方法进行持久化存储

export default class useMobxStore {
  count: number = 0
  constructor() {
    // 响应式处理
    makeAutoObservable(this)
    // makePersistable 数据持久化存储
    makePersistable(this, {
      name: 'mobxDemo', // 存储到localStorage当中的key值是什么，此处为字符串string；
      properties: ['count'], // 需要持久化的数据是什么，此数据需要为上面声明了的变量，并且传值方式为[string]
      storage: window.localStorage, // 你的数据需要用那种方式存储，常见的就是localStorage
    })
  }

  addCount = () => {
    this.count++
    console.log(this.count)
  }
}

computed 计算属性

计算属性需要用get 开头然后接 函数名，并且mobx规定计算属性必须要有返回值；

直接上代码：

import { makeAutoObservable } from 'mobx'
import { makePersistable } from 'mobx-persist-store'

export default class useMobxStore {
  // 定义一个初始数据
  count = 0
  // 定义一个原始数组，用于测试computed计算属性
  list = [1, 2, 3, 4, 5, 6]

  constructor() {
    // 响应式处理
    makeAutoObservable(this)
    // makePersistable 数据持久化存储
    makePersistable(this, {
      name: 'mobxDemo',
      properties: ['count'],
      storage: window.localStorage,
    })
  }
  // 定义一个计算属性
  get filterList() {
    return this.list.filter((item) => item > 4)
  }

  //增加list数据内容
  addList = () => {
    this.list.push(7)
  }

  // 定义一个action函数，修改状态管理的数据
  addCount = () => {
    this.count++
    console.log(this.count)
  }
}

---- 组件 ----

import React from 'react'
import { observer } from 'mobx-react-lite'
import store from '@/store'
const { useMobxStore } = store

const MobxDemo = () => {
  return (
    <div>
      <h2>{useMobxStore.count}</h2>
      <button onClick={useMobxStore.addCount}>+1</button>
      {/* 计算属性 */}
      <div>{useMobxStore.filterList.join('~')}</div>
      <button onClick={useMobxStore.addList}>点我数组添加内容</button>
    </div>
  )
}

export default observer(MobxDemo)

mobx 的模块化、项目化使用

一般用到了状态管理工具，都是整套的项目开发，环境比较复杂，数据量及种类多；像一些逻辑及数据都很简单的小项目也没有必要用到状态管理工具，所以mobx的模块化开发与项目中标准使用是尤为关键的，下面我将我日常项目开发中使用的mobx统一格式封装方法贴出来，如果大家觉得不错，可以用到自己未来的项目开发中哦！

Store 中的 index.ts

import React from 'react'
import useMobxStore from './modules/mobxDmeo'
class RootStore {
  useMobxStore: useMobxStore
  constructor() {
    // 对引入进行来的子模块进行实例化操作，并挂载到RootStore上
    this.useMobxStore = new useMobxStore()
  }
}

// 实例化操作
const rootStore = new RootStore()
// 这里可以使用React context 完成统一方法的封装需求
const context = React.createContext(rootStore)
// 封装useStore方法，业务组件调用useStore方法便就可以直接获取rootStore
const useStore = () => React.useContext(context)

export default useStore

组件内统一使用

import React from 'react'
import { observer } from 'mobx-react-lite'
import useStore from '@/store'

const MobxDemo = () => {
  /* 注意 此处解构写道store一级即可，如果结构到store下面一级的属性级，则会破坏响应式数据 */
  const { useMobxStore } = useStore()
  return (
    <div>
      <h2>{useMobxStore.count}</h2>
      <button onClick={useMobxStore.addCount}>+1</button>
      {/* 计算属性 */}
      <div>{useMobxStore.filterList.join('~')}</div>
      <button onClick={useMobxStore.addList}>点我数组添加内容</button>
    </div>
  )
}

export default observer(MobxDemo)

结语

以上就是我个人对mobx6使用上的一些小感悟，如果大家觉得有用的话，欢迎点赞，收藏哦~谢谢哈！