Clean up unnecessary store setters

src/App.vue

@@ -1,12 +1,12 @@
 <template>
   <resizable v-model:width="width">
     <template v-slot:default>
-      <editor v-model:content="content" v-model:selection="selection" v-model:scroll="scroll" :icons="iconStore.icons"
-        :size="editorStore.size" />
+      <editor v-model:content="editorStore.content" v-model:selection="editorStore.selection"
+        v-model:scroll="editorStore.scroll" :icons="iconStore.icons" :size="editorStore.size" />
     </template>
     <template v-slot:fixed>
-      <scroller v-model:scroll="scroll">
-        <BSMap v-bind:content="content" v-bind:size="editorStore.size" />
+      <scroller v-model:scroll="editorStore.scroll">
+        <BSMap :content="editorStore.content" :size="editorStore.size" />
       </scroller>
     </template>
   </resizable>
@@ -17,7 +17,6 @@ import { computed } from 'vue';
 
 import { useEditorStore } from '@/stores/editor';
 import { useIconStore } from '@/stores/icon';
-import ISelection from '@/types/selection';
 
 import Resizable from './components/Resizable.vue';
 import Scroller from './components/Scroller.vue';
@@ -35,34 +34,7 @@ const width = computed({
     return Math.max(Math.min(width, max), min);
   },
   set(v: number) {
-    editorStore.setWidth(v);
-  }
-});
-
-const scroll = computed({
-  get(): number {
-    return editorStore.scroll;
-  },
-  set(v: number) {
-    editorStore.setScroll(v);
-  }
-});
-
-const selection = computed({
-  get(): ISelection | null {
-    return editorStore.selection;
-  },
-  set(v: ISelection | null) {
-    editorStore.setSelection(v);
-  }
-});
-
-const content = computed({
-  get(): string {
-    return editorStore.content;
-  },
-  set(v: string) {
-    editorStore.save(v);
+    editorStore.width = v;
   }
 });
 </script>

src/components/BSMap/BSCell.vue

@@ -33,12 +33,12 @@ const icons = computed(() => {
 });
 
 function handleClick(): void {
-  editorStore.setSelection({
+  editorStore.selection = {
     row: props.row,
     offset: props.offset,
     length: props.content.length,
     from: 'preview',
-  });
+  };
 }
 
 function updateRatio(index: number, newRatio: number): void {

src/components/BSMap/BSText.vue

@@ -17,12 +17,12 @@ const props = defineProps<{
 const editorStore = useEditorStore();
 
 function handleClick(): void {
-  editorStore.setSelection({
+  editorStore.selection = {
     row: props.row,
     offset: props.offset,
     length: props.content.length,
     from: 'preview',
-  });
+  };
 }
 </script>
 

src/stores/editor.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { debounce } from 'radash';
 
 import ISelection from '@/types/selection';
@@ -13,31 +13,23 @@ export const useEditorStore = defineStore('editor', () => {
   const scroll = ref(0);
   const selection = ref<ISelection | null>(null);
 
-  function setSize(value: number): void {
-    size.value = value;
-    debouncedSetItem('size', `${size.value}`);
-  }
+  watch(size, (value) => {
+    debouncedSetItem('split', String(value));
+  });
 
-  function setWidth(value: number): void {
-    width.value = value;
-    debouncedSetItem('width', `${width.value}`);
-  }
+  watch(width, (value) => {
+    debouncedSetItem('width', String(value));
+  });
 
-  function setScroll(value: number): void {
-    scroll.value = value;
-  }
-
-  function setSelection(value: ISelection | null): void {
-    selection.value = value;
-  }
-
-  function save(value: string): void {
-    content.value = value;
+  watch(content, (value) => {
     debouncedSetItem('content', value);
-  }
+  });
 
   return {
-    size, width, content, scroll, selection,
-    setSize, setWidth, setScroll, setSelection, save
+    size,
+    width,
+    content,
+    scroll,
+    selection,
   };
 });