nuxt-live-editor/dist/runtime/stores/useLiveEditorStore.mjs

My new Nuxt module

import { defineStore as definePiniaStore } from "pinia";
import { watchDebounced } from "@vueuse/core";
import { useDirectusItems, refreshNuxtData } from "#imports";
import { ref } from "vue";
import { usePreview } from "../composables/usePreview.mjs";
import { useMode } from "../composables/useMode.mjs";
export const useLiveEditorStore = definePiniaStore("liveEditorStore", () => {
  const { updateItem, createItems } = useDirectusItems();
  const { current_lang_page, current_name_page } = useMode();
  const mode_edit = ref(false);
  const mode_login = ref(true);
  const mode_hover_border = ref(false);
  const loading = ref(false);
  const browser = ref();
  const user = ref(null);
  const is_edit = ref(false);
  const auto_save = ref(false);
  const data_live_editor = ref([]);
  const data_live_editor_async = ref({});
  const data_live_editor_server = ref({});
  const data_keys_used = ref([]);
  const refreshData = () => {
    data_live_editor_async.value = data_live_editor_server.value;
  };
  const setLiveEditor = (data) => {
    user.value = data.user;
    is_edit.value = data.is_edit;
    data_live_editor.value = data.data_live_editor;
    data_live_editor_async.value = praseArrayToObject(data.data_live_editor);
    data_live_editor_server.value = praseArrayToObject(data.data_live_editor);
  };
  const praseArrayToObject = (data) => {
    return data.reduce((object, current_item) => {
      object[current_item.option_key] = current_item.option_value;
      return object;
    }, {});
  };
  const findIdFromKey = (key) => data_live_editor.value.find((item) => item.option_key === key)?.id ?? -1;
  const undoItemChange = (key) => {
    data_live_editor_async.value[key] = data_live_editor_server.value[key] ?? "";
  };
  const checkGroupGlobal = (item) => {
    if (item?.item?.option_group) return item?.item?.option_group;
    return item?.key?.split(".")?.pop() === "global" ? "global" : current_name_page.value;
  };
  const handleSave = async () => {
    loading.value = true;
    const data_live_editor_save = usePreview().list_changed.value?.map((item) => {
      return {
        language: current_lang_page.value,
        option_group: checkGroupGlobal(item),
        option_key: item.key,
        option_value: item.new,
        id: +findIdFromKey(item.key)
      };
    });
    const data_update_or_create = await data_live_editor_save?.reduce((data, current_item) => {
      if (findIdFromKey(current_item.option_key) !== -1) {
        data["update"].push(current_item);
      } else {
        data["create"].push({
          option_key: current_item.option_key,
          option_value: current_item.option_value,
          option_group: current_item.option_group,
          language: current_lang_page.value
        });
      }
      return data;
    }, {
      update: [],
      create: []
    });
    try {
      if (data_update_or_create.create.length > 0) {
        await createItems({
          collection: "live_editor",
          items: data_update_or_create.create
        }).catch();
      }
      if (data_update_or_create.update.length > 0) {
        data_update_or_create.update?.forEach(async (item) => {
          await updateItem({
            collection: "live_editor",
            id: item.id.toString(),
            item: {
              option_key: item.option_key,
              option_value: item.option_value,
              option_group: item.option_group,
              language: current_lang_page.value
            }
          });
        });
      }
    } catch (e) {
      console.log(`Update Website Error`, e);
    } finally {
      loading.value = false;
      await refreshNuxtData("live_editor");
    }
  };
  watchDebounced(data_live_editor_async, () => {
    if (!auto_save.value) return;
    handleSave();
  }, {
    debounce: 1e3,
    maxWait: 1e4,
    deep: true
  });
  return {
    mode_edit,
    mode_hover_border,
    loading,
    auto_save,
    mode_login,
    browser,
    user,
    is_edit,
    data_live_editor,
    data_live_editor_async,
    data_live_editor_server,
    data_keys_used,
    setLiveEditor,
    refreshData,
    handleSave,
    undoItemChange
  };
});