zustand管理工具--React

npm i zustand

1.函数参数必须返回一个对象 对象内部编写状态数据和方法

2.set是用来修改数据的专门方法必须调用它来修改数据

import { useEffect } from "react";
import { create } from "zustand";
 
// 1. 创建store
const goodsStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
  channelList: [],
  // 异步方法
  fetchChannelList: async () => {
    const res = await fetch(URL);
    const jsonData = await res.json();
 
    set({ channelList: jsonData.data.channels });
  },
}));
 
// 2. 绑定store到组件
function Counter() {
  const { count, inc, channelList, fetchChannelList } = goodsStore();
 
  useEffect(() => {
    fetchChannelList()
  }, [fetchChannelList])
 
  return (
    <div>
      <button onClick={inc}>{count}button>
      <ul>
        {channelList.map((item) => {
          return <li key={item.id}>{item.name}li>;
        })}
      ul>
    div>
  );
}
 
export default Counter;

3.切片模式--模块化

import { useEffect } from "react";
import { create } from "zustand";
 
// 1. 创建store
const goodsStore = (set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
});
 
const channelListStore = (set) => ({
  channelList: [],
  // 异步方法
  fetchChannelList: async () => {
    const res = await fetch(URL);
    const jsonData = await res.json();
 
    set({ channelList: jsonData.data.channels });
  },
});
 
const useStore = create((...a) => ({
    ...goodsStore(...a),
    ...channelListStore(...a),
  }));
 
// 2. 绑定store到组件
function Counter() {
  const { count, inc, channelList, fetchChannelList } = useStore();
 
  useEffect(() => {
    fetchChannelList();
  }, [fetchChannelList]);
 
  return (
    <div>
      <button onClick={inc}>{count}button>
      <ul>
        {channelList.map((item) => {
          return <li>{item}li>;
        })}
      ul>
    div>
  );
}
 
export default Counter;