Astro React Vue. Global State Management: Zustand

CounterReact.jsx

import React from "react";
import { useStore } from "./store";

export default function CounterReact({ demo }) {
  const state = useStore((state) => state);

  let add = () => {
    state.inc();
  };

  let subtract = () => {
    state.dec();
  };

  return (
    <div>
      React Count: {state.count} {demo}
      <br />
      <button onClick={subtract}>-</button>
      <button onClick={add}>+</button>
    </div>
  );
}

CounterVue.vue

<template>
  <div>Vue Count: {{ count }} {{ demo }}</div>
  <button @click="subtract">-</button>
  <button @click="add">+</button>
</template>

<script>
import { useStore } from "./store";

const Counter = {
  name: "CounterVue",
  props: {
    demo: String,
  },
  data() {
    return {
      count: useStore.getState().count,
    };
  },
  mounted() {
    this.unsub = useStore.subscribe(
      (value) => (this.count = value),
      (state) => state.count
    );
  },
  beforeUnmount() {
    if (this.unsub) this.unsub();
  },
  methods: {
    add() {
      useStore.getState().inc();
    },
    subtract() {
      useStore.getState().dec();
    },
  },
};

export default Counter;
</script>

<style scoped></style>

store.js

import create from "zustand";

export const useStore = create((set) => ({
  count: 20,
  inc: () => set((state) => ({ count: state.count + 1 })),
  dec: () => set((state) => ({ count: state.count - 1 })),
}));