💻 Check out this Codesandbox demo: Vue 2 Playground
ℹ️ This approach works for Vue 2.6 and above.
🔍 Tiny: Just 10 lines of source code, no dependencies.
✨ The same Zustand store can be used with different libraries, such as Vue, React, or Svelte.
- Copy
vueZustand.ts
to your project.
- Create a vanilla Zustand store, like in
bearStore.ts
. - Create your Vue store by passing the created vanilla Zustand store to
createFromStore
, as done inbearStore.ts
- In the Vue component where you want to use the store, import the Vue store and use it. See
BearPopulation.vue
The Vue store you have created is reactive, and when the state in Zustand updates, your component will update accordingly.
Vue's observable will only react to changes in the parts of your store that actually change, so there is no need to slice and check for equality as this is handled by Vue's observable. For more information, visit the Vue observable documentation.