react中如何使用mobx（pinia风格）

       react的状态管理库（mobx）官方文档写得是真的烂，一点也不直观，相比pinia感觉差得不是一星半点。这儿提供一种类似于pinia的使用体验方法。

       我看到网上很多使用都是将store做得统一管理，类似于vuex的写法，但是我还是喜欢pinia那种分开的使用方式。优雅

store文件编写

• store/user/index.ts

import {makeAutoObservable} from 'mobx'
import React from 'react'

class UserStore {

    username = ''

    constructor() {
        makeAutoObservable(this)
    }

    setName(name: string) {
        this.username = name
    }
}

const userStoresContext = React.createContext({
    userStore: new UserStore(),
})

const useUserStore = () => React.useContext(userStoresContext)


export {
    useUserStore,
}

组件中使用

• views/home/index.tsx

import {observer} from 'mobx-react-lite'
import {useUserStore} from '@/store/user'

const Home = observer(() => {
    const {userStore} = useUserStore()

    const changeName = () => {
        userStore.setName('boyyang')
    }
    return (
        <>
            <div>{userStore.username}</div>
            <span onClick={() => changeName()}>changeName</span>
        </>
    )
})

export default Home

总结：

       目前没有发现问题，多个组件使用数据状态也改变了，还是觉得pinia更加简单易懂，官方文档也写得非常好，mobx那文档真的没发看。