🍍大小不到2Kb的react状态管理真香

简介

react-pinia是一个react极简状态管理库。以极小，极易，零依赖且支持数据持久化等特点构建react状态管理。灵感来自pinia以及ahooks

市面上的状态管理大多不是难易就是难配置，多多少少都有一下诟病，极其不方便。

安装

npm run react-pinia

yarn pnpm安装方式类似

使用

react-pinia有全局状态管理以及局部状态管理

全局状态管理使用

定义models

import { createStore, createStoreOption } from 'react-pinia'

const home: createStoreOption = {
  state: () => {
    return {
      count: 1,
      user: 'hello world',
    }
  },
  getters: {
    doubleCount: (state) => {
      return state.count * 2
    },
  },
  actions: {
    add() {
      this.count += 1
      console.log(this)
    },
  },
  // 是否持久化数据
  persist: {
    key: 'home',
    storage: 'localStorage'
  }
}

const about: createStoreOption = {
  state: () => {
    return {
      num: 1,
    }
  },
}

const store = createStore({
  home,
  about,
})

export default store

在入口引入状态定义, 全局挂载，类似redux

import { Provider } from 'react-pinia'
import store from '@/store'
import App from './App'
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector('#app')
)

全局使用

import { useStore } from 'react-pinia'
const App = memo(() => {
  const { count, user, doubleCount, add } = useStore('home')
  return (
    <section>
      <p>count: {count}</p>
      <p>doubleCount: {doubleCount}</p>
      <p>{user}</p>
      <button onClick={add}>累加</button>
    </section>
  )
})
export default App

是不是so easy

局部使用

局部使用不需要全局挂载，直接使用即可, 使用更容易 定义model

import { defineStore } from 'react-pinia'
const useStore = defineStore({
  state: () => {
    return {
      count: 1,
      user: 'hello',
    }
  },
  getters: {
    doubleCount: (state) => {
      return state.count * 2
    },
  },
  actions: {
    add() {
      this.count += 1
    },
  },
  // 是否持久化数据
  persist: {
    key: 'user',
    storage?: 'localStorage'
  }
})
export default useStore

页面使用状态

import { memo } from 'react'
import useStore from './useStore'
const Page = memo(() => {
  const { count, doubleCount, add } = useStore('count')
  return (
    <section>
      <p>{count}</p>
      <p>{doubleCount}</p>
      <button onClick={add}>累加</button>
    </section>
  )
})
export default Page

打包后库的分析

大小不到2kb的状态管理，确定你们不来试试