vue2-zustand

1_vue2-zustand.md

How to use Zustand with Vue 2

💻 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.

Installation

1. Copy vueZustand.ts to your project.

Getting Started

2. Create a vanilla Zustand store, like in bearStore.ts.
3. Create your Vue store by passing the created vanilla Zustand store to createFromStore, as done in bearStore.ts

Usage

4. 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.

BearPopulation.vue

<template>
  <div>
    Bear population: {{ bearStore.bears }}
    <br />
    <button @click="() => bearStore.increasePopulation()">
      Increase population
    </button>
  </div>
</template>

<script>
import { bearStoreVue } from "./bearStore";

export default {
  name: "BearPopulation",
  data() {
    return {
      bearStore: bearStoreVue,
    };
  },
};
</script>

bearStore.ts

import { createStore } from "zustand/vanilla";
import { createFromStore } from "./vueZustand";

type BearState = {
  bears: number;
  increasePopulation: () => void;
};

const bearStoreVanilla = createStore<BearState>((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 }))
}));

export const bearStoreVue = createFromStore(bearStoreVanilla);

vueZustand.ts

import Vue from "vue";
import { StoreApi } from "zustand/vanilla";

export const createFromStore = <T extends object>(store: StoreApi<T>) => {
  const state = store.getState();
  const observable = Vue.observable(state);

  store.subscribe((newState) => {
    Object.assign(observable, newState);
  });

  return observable;
};