valtio

使用valtio的例子

pnpm install
pnpm dev

效果图：

import { proxy, subscribe, snapshot } from 'valtio/vanilla'

type Store = {
  count: number
  list?: () => Promise<any>
  increment?: () => void
  data?: any
}
export const store = proxy<Store>({
  count: 0,
  data: []
})

store.increment = function () {
  this.count += 1
}

store.list = async function () {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos')
  const data = await res.json()
  console.log('fetched data:', Date.now())
  this.data = data
  return data
}
// subscribe(store, () => {
//   console.log('store changed:', store)
// })

// subscribe counter changes
subscribe(store, () => {
  console.log('count changed:', store.count)
  // console.log('proxy data:', store.data)
  // console.log('snapshot data:', snapshot(store).data)
})
store.increment()
store.increment()
store.increment()
store.increment()
store.increment()
store.increment()
store.increment()


store.list()

store.list()