安装
复制代码
npm i zustand
基本使用
javascript
复制代码
import React from "react";
import { create } from "zustand";
// 1. 创建store
const useStore = create((set) => {
return {
// 状态数据
count: 0,
inc: (data) => {
set((state) => ({ count: state.count + data }));
},
};
});
// 2. 绑定store到组件
export default function App() {
const { count, inc } = useStore();
return (
<div>
<div>count:{count}</div>
<button onClick={() => inc(1)}>点我+1</button>
</div>
);
}
异步支持
javascript
复制代码
import React from "react";
import { create } from "zustand";
const URL = "http://geek.itheima.net/v1_0/channels";
// 1. 创建store
const useStore = create((set) => {
return {
// 状态数据
count: 0,
inc: (data) => {
set((state) => ({ count: state.count + data }));
},
// 异步支持
// 状态数据
channelList: [],
fetchGetList: async () => {
const res = await fetch(URL);
const jsonRes = await res.json();
set(() => ({ channelList: jsonRes.data.channels }));
},
};
});
// 2. 绑定store到组件
export default function App() {
const { count, inc, fetchGetList, channelList } = useStore();
return (
<div>
<div>count:{count}</div>
<button onClick={() => inc(1)}>点我+1</button>
<button onClick={() => fetchGetList()}>异步支持</button>
{channelList.map((item) => (
<div>{item.id}</div>
))}
</div>
);
}
切片模式
javascript
复制代码
import { create } from "zustand";
const URL = "http://geek.itheima.net/v1_0/channels";
// 1. 创建counter相关切片
const counterStore = (set) => {
return {
// 状态数据
count: 0,
inc: (data) => {
set((state) => ({ count: state.count + data }));
},
asyncInc: (data) => {
setTimeout(() => {
set((state) => ({ count: state.count + data }));
}, 2000);
},
};
};
// 2. 创建channel相关切片
const channelStore = (set) => {
return {
channelList: [],
fetchGetList: async () => {
const res = await fetch(URL);
const jsonRes = await res.json();
set(() => ({ channelList: jsonRes.data.channels }));
},
};
};
// 3.组合切片
const useStore = create((...a) => {
return {
...counterStore(...a),
...channelStore(...a),
};
});
export default function App() {
const { count, inc, fetchGetList, asyncInc, channelList } = useStore();
return (
<div>
<div>count:{count}</div>
<button onClick={() => inc(1)}>点我+1</button>
<button onClick={() => asyncInc(2)}>异步+2</button>
<button onClick={() => fetchGetList()}>异步支持</button>
{channelList.map((item) => (
<div key={item.id}>{item.id}</div>
))}
</div>
);
}
复制代码