58 lines
1016 B
Markdown
58 lines
1016 B
Markdown
# valtio
|
|
|
|
使用valtio的例子
|
|
|
|
```bash
|
|
pnpm install
|
|
pnpm dev
|
|
```
|
|
|
|
效果图：
|
|
```ts
|
|
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()
|
|
``` |