DC3 · August 1, 2024 18:36 · Apr 19, 2023 · Apr 19, 2023 · Apr 19, 2023 · Apr 19, 2023
diff --git a/1_vue2-zustand.md b/1_vue2-zustand.md
@@ -4,7 +4,7 @@
 
 ℹ️ This approach works for Vue 2.6 and above.
 
-🔍 Tiny: Just 10 lines of source code.
+🔍 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.
 

diff --git a/1_vue2-zustand.md b/1_vue2-zustand.md
@@ -1,4 +1,4 @@
-# How to Use Zustand with Vue 2
+# How to use Zustand with Vue 2
 
 💻 Check out this Codesandbox demo: [Vue 2 Playground](https://codesandbox.io/s/vue-2-playground-forked-q9r4x1?file=/src/bearStore.ts)
 

diff --git a/_vue2-zustand.md → 1_vue2-zustand.md b/_vue2-zustand.md → 1_vue2-zustand.md
diff --git a/vue2-zustand.md → _vue2-zustand.md b/vue2-zustand.md → _vue2-zustand.md
diff --git a/1readme.md → vue2-zustand.md b/1readme.md → vue2-zustand.md
diff --git a/_readme.md → 1readme.md b/_readme.md → 1readme.md
diff --git a/readme.md → _readme.md b/readme.md → _readme.md
diff --git a/BearPopulation.vue b/BearPopulation.vue
@@ -0,0 +1,22 @@
+<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>
diff --git a/bearStore.ts b/bearStore.ts
@@ -0,0 +1,14 @@
+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);
diff --git a/readme.md b/readme.md
@@ -0,0 +1,26 @@
+# How to Use Zustand with Vue 2
+
+💻 Check out this Codesandbox demo: [Vue 2 Playground](https://codesandbox.io/s/vue-2-playground-forked-q9r4x1?file=/src/bearStore.ts)
+
+ℹ️ This approach works for Vue 2.6 and above.
+
+🔍 Tiny: Just 10 lines of source code.
+
+✨ 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](https://v2.vuejs.org/v2/api/#Vue-observable).
diff --git a/vueZustand.ts b/vueZustand.ts
@@ -0,0 +1,13 @@
+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;
+};