jotai使用

用户4792657

发布于 2022-07-06 14:09:15

57500

代码可运行

文章被收录于专栏：山海亦有归期山海亦有归期

运行总次数：0

代码可运行

jotai使用

快速使用

定义变量

import { atom } from 'jotai'

const countAtom = atom(0)
const countryAtom = atom('Japan')
const citiesAtom = atom(['Tokyo', 'Kyoto', 'Osaka'])
const mangaAtom = atom({ 'Dragon Ball': 1984, 'One Piece': 1997, Naruto: 1999 })
复制代码

在页面中使用

import { useAtom } from 'jotai'

function Counter() {
  const [count, setCount] = useAtom(countAtom)
  return (
    <h1>
      {count}
      <button onClick={() => setCount(c => c + 1)}>one up</button>
复制代码

本地存储

主要是为了存储token，主题色等。

使用

index.ts

先定义一个atom

export const themeColorAtom = atomWithStorage('themeColor', localStorage.getItem('themeColor')||'#1890ff')
复制代码

index.tsx

import {themeColorAtom} from '@/store'
import { useAtom } from 'jotai'

 const [color, setColor] =useAtom(themeColorAtom)
复制代码

使用setColor修改变量的同时则会起到同时修改本地localstorge里面的变量的值。

官方例子

import { useAtom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'

const darkModeAtom = atomWithStorage('darkMode', false)

const Page = () => {
  const [darkMode, setDarkMode] = useAtom(darkModeAtom)

  return (
    <>
      <h1>Welcome to {darkMode ? 'dark' : 'light'} mode!</h1>
      <button onClick={() => setDarkMode(!darkMode)}>toggle theme</button>
    </>
  )
}
复制代码

删除/重置

import { useAtom } from 'jotai'
import { atomWithStorage, RESET } from 'jotai/utils'

const textAtom = atomWithStorage('text', 'hello')

const TextBox = () => {
  const [text, setText] = useAtom(textAtom)

  return (
    <>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={() => setText(RESET)}>Reset (to 'hello')</button>
    </>
  )
}
复制代码

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-21，如有侵权请联系 cloudcommunity@tencent.com 删除

typescript