1. 安装：
# NPM
npm install zustand
# Yarn
yarn add zustand
2. 创建store：
import { create } from "zustand";
const useStore = create((set) => ({
count: 0,
str: "",
addCount: () => set((state) => ({ count: state.count + 1 })),
setStr: (newStr) => set(() => ({ str: newStr })),
}));
export default useStore;
3. 组件内使用：
import {
Button,
View,
Text,
} from 'react-native';
import { useStore } from "./store";
export default function Page() {
const count = useStore((state) => state.count);
const str = useStore((state) => state.str);
const addCount = useStore((state) => state.addCount);
const setStr = useStore((state) => state.setStr);
const clickHandle = () => {
addCount();
setStr("a new string");
}
return (
<View>
<Text>{count}</Text>
<Text>{str}</Text>
<Button onPress={clickHandle} title="Click Button" color="#841584">点击</Button>
</View>
)
}
4. 外部文件中使用并获取更新状态
通过getState方法获取数据，通过subscribe方法订阅监听数据变更
import { useStore } from "./store";
const count = useStore.getState().count;
useStore.subscribe((newState) => {
console.log(newState.count);
});