refactor: store state

src/stores/vrcx.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { reactive, watch, ref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { worldRequest } from '../api';
 import configRepository from '../service/config';
@@ -51,20 +51,21 @@ export const useVrcxStore = defineStore('Vrcx', () => {
 
     const state = reactive({
         databaseVersion: 0,
-        clearVRCXCacheFrequency: 172800,
-        proxyServer: '',
         locationX: 0,
         locationY: 0,
         sizeWidth: 800,
         sizeHeight: 600,
         windowState: '',
-        maxTableSize: 1000,
-        ipcEnabled: false,
-        externalNotifierVersion: 0,
-        currentlyDroppingFile: null,
-        isRegistryBackupDialogVisible: false
+        externalNotifierVersion: 0
     });
 
+    const currentlyDroppingFile = ref(null);
+    const isRegistryBackupDialogVisible = ref(false);
+    const ipcEnabled = ref(false);
+    const clearVRCXCacheFrequency = ref(172800);
+    const maxTableSize = ref(1000);
+    const proxyServer = ref('');
+
     async function init() {
         if (LINUX) {
             window.electron.ipcRenderer.on('launch-command', (command) => {
@@ -100,7 +101,7 @@ export const useVrcxStore = defineStore('Vrcx', () => {
             0
         );
 
-        state.clearVRCXCacheFrequency = await configRepository.getInt(
+        clearVRCXCacheFrequency.value = await configRepository.getInt(
             'VRCX_clearVRCXCacheFrequency',
             172800
         );
@@ -123,7 +124,7 @@ export const useVrcxStore = defineStore('Vrcx', () => {
                 'false'
             );
         }
-        state.proxyServer = await VRCXStorage.Get('VRCX_ProxyServer');
+        proxyServer.value = await VRCXStorage.Get('VRCX_ProxyServer');
         state.locationX = parseInt(await VRCXStorage.Get('VRCX_LocationX'), 10);
         state.locationY = parseInt(await VRCXStorage.Get('VRCX_LocationY'), 10);
         state.sizeWidth = parseInt(await VRCXStorage.Get('VRCX_SizeWidth'), 10);
@@ -133,60 +134,18 @@ export const useVrcxStore = defineStore('Vrcx', () => {
         );
         state.windowState = await VRCXStorage.Get('VRCX_WindowState');
 
-        state.maxTableSize = await configRepository.getInt(
+        maxTableSize.value = await configRepository.getInt(
             'VRCX_maxTableSize',
             1000
         );
-        if (state.maxTableSize > 10000) {
-            state.maxTableSize = 1000;
+        if (maxTableSize.value > 10000) {
+            maxTableSize.value = 1000;
         }
-        database.setMaxTableSize(state.maxTableSize);
+        database.setMaxTableSize(maxTableSize.value);
     }
 
     init();
 
-    const currentlyDroppingFile = computed({
-        get: () => state.currentlyDroppingFile,
-        set: (value) => {
-            state.currentlyDroppingFile = value;
-        }
-    });
-
-    const isRegistryBackupDialogVisible = computed({
-        get: () => state.isRegistryBackupDialogVisible,
-        set: (value) => {
-            state.isRegistryBackupDialogVisible = value;
-        }
-    });
-
-    const ipcEnabled = computed({
-        get: () => state.ipcEnabled,
-        set: (value) => {
-            state.ipcEnabled = value;
-        }
-    });
-
-    const clearVRCXCacheFrequency = computed({
-        get: () => state.clearVRCXCacheFrequency,
-        set: (value) => {
-            state.clearVRCXCacheFrequency = value;
-        }
-    });
-
-    const maxTableSize = computed({
-        get: () => state.maxTableSize,
-        set: (value) => {
-            state.maxTableSize = value;
-        }
-    });
-
-    const proxyServer = computed({
-        get: () => state.proxyServer,
-        set: async (value) => {
-            state.proxyServer = value;
-        }
-    });
-
     // Make sure file drops outside of the screenshot manager don't navigate to the file path dropped.
     // This issue persists on prompts created with prompt(), unfortunately. Not sure how to fix that.
     document.body.addEventListener('drop', function (e) {
@@ -445,7 +404,6 @@ export const useVrcxStore = defineStore('Vrcx', () => {
     }
 
     // use in C# side
-    // eslint-disable-next-line no-unused-vars
     function ipcEvent(json) {
         if (!watchState.isLoggedIn) {
             return;
@@ -529,7 +487,7 @@ export const useVrcxStore = defineStore('Vrcx', () => {
                 if (!photonStore.photonLoggingEnabled) {
                     photonStore.setPhotonLoggingEnabled();
                 }
-                state.ipcEnabled = true;
+                ipcEnabled.value = true;
                 updateLoopStore.ipcTimeout = 60; // 30secs
                 break;
             case 'MsgPing':
@@ -550,15 +508,14 @@ export const useVrcxStore = defineStore('Vrcx', () => {
      * This function is called by .NET(CefCustomDragHandler#CefCustomDragHandler) when a file is dragged over a drop zone in the app window.
      * @param {string} filePath - The full path to the file being dragged into the window
      */
-    // eslint-disable-next-line no-unused-vars
     function dragEnterCef(filePath) {
-        state.currentlyDroppingFile = filePath;
+        currentlyDroppingFile.value = filePath;
     }
 
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
-            state.isRegistryBackupDialogVisible = false;
+            isRegistryBackupDialogVisible.value = false;
             if (isLoggedIn) {
                 startupLaunchCommand();
             }
@@ -728,7 +685,7 @@ export const useVrcxStore = defineStore('Vrcx', () => {
     }
 
     function showRegistryBackupDialog() {
-        state.isRegistryBackupDialogVisible = true;
+        isRegistryBackupDialogVisible.value = true;
     }
 
     async function tryAutoBackupVrcRegistry() {