Example

ToDoList example

import { createStore, ref, computed } from "reactivity-store";

const useTodo = createStore(() => {
  const data = ref<{ id: number; text: string; done: boolean; edit: boolean }[]>([]);

  const mode = ref<"all" | "done" | "active">("all");

  const isAllComplete = computed(() => data.value.length > 0 && data.value.every((todo) => todo.done));

  const currentShow = computed(() => (mode.value === "all" ? data.value : data.value.filter((todo) => (mode.value === "done" ? todo.done : !todo.done))));

  const notDoneLength = computed(() => data.value.filter((todo) => !todo.done).length);

  const hasSomeItemDone = computed(() => data.value.some((todo) => todo.done));

  const addTodo = (text: string) => {
    data.value = data.value.concat({ id: data.value.length + Math.random(), text, done: false, edit: false });
  };

  const removeTodo = (id: number) => {
    data.value = data.value.filter((todo) => todo.id !== id);
  };

  const editTodo = (id: number, content: string) => {
    data.value = data.value.map((todo) => {
      if (todo.id === id) {
        todo.text = content;
      }
      return todo;
    });
  };

  const enableEdit = (id: number) => {
    data.value = data.value.map((todo) => {
      if (todo.id === id) {
        todo.edit = true;
      } else {
        todo.edit = false;
      }
      return todo;
    });
  };

  const disableEdit = () => {
    data.value = data.value.map((todo) => {
      todo.edit = false;
      return todo;
    });
  };

  const toggleTodo = (id: number) => {
    data.value = data.value.map((todo) => {
      if (todo.id === id) {
        todo.done = !todo.done;
      }
      return todo;
    });
  };

  const toggleAllDone = () => {
    const isAllDone = isAllComplete.value;
    data.value = data.value.map((todo) => {
      todo.done = !isAllDone;
      return todo;
    });
  };

  const clearDone = () => {
    data.value = data.value.filter((todo) => !todo.done);
  };

  const changeMode = (m: "all" | "active" | "done") => {
    mode.value = m;
  };

  return {
    addTodo,
    data,
    removeTodo,
    editTodo,
    enableEdit,
    disableEdit,
    toggleTodo,
    isAllComplete,
    toggleAllDone,
    currentShow,
    mode,
    notDoneLength,
    hasSomeItemDone,
    clearDone,
    changeMode,
  };
});

Example