在React之外使用

除了可以在React组件中使用Store以外，Zustand还支持在React组件以外以原生Javascript的形式使用Store。此时对于Store操作就会变得更加底层了一些。具体一些常用的操作可以参考以下示例。

// 利用getState()方法可以立刻获取调用时刻的Store内容的快照。
// 但是使用这种方法不会是返回的内容随Store中持有的Stae的变化而发生变化。
const currentGear = useGearBox.getState().currentGear;

// subscribe()方法可以接受一个函数作为参数，这个函数所接收到的是整个Store发生变化以后的快照。
// 在调用的时候会创建一个监听器，会自动在Store中的内容发生变化的时候调用。
// subscribe()方法会返回一个用于注销监听器的函数，需要在清理监听现场的时候使用。
const unsubscribe = useGearBox.subscribe(console.log);

// 使用setState()方法可以更新Store中持有的State，并且可以触发所有相关的监听器。
useGearBox.setState({ ecoMode: true });

// destory()方法可以用来注销Store中的注册的全部监听器，并同时销毁Store中持有的全部内容。
useGeaBox.destory();

实际上在之前的章节中已经多次使用过上面这些方法了，但是使用Zustand默认导出的create方法会创建一个Hook，而使用原生Javascript的时候，却用不到这个，所以在原生Javascript中使用Zustand的时候，需要创建一个非Hook形式的Store。

创建一个用于原生Javascript的Store也是通过create函数，但是是从Zustand的另一个模块中导出的。例如以下示例。

import create from 'zustand/vanilla';

const gearBoxStore = create(set => ({
  currentGear: 0
}));

const { getState, setState, subscribe, destory } = gearBoxStore;

从这个示例中可以看到，用于原生Javascript使用的Store提供了一组用于访问和控制状态的工具函数。

使用原生模式创建的Store也可以被还容易的转换回提供React组件使用的Hook形式的Store。要实现这个转换只需要对已经建立的用于原生Javascript的Store再使用Zustand默认导出的create函数处理一遍即可。

import create from 'zustand';

const useGearBox = create(gearBoxStore);