refactor: store state

src/stores/auth.js

@@ -1,6 +1,6 @@
 import Noty from 'noty';
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { authRequest } from '../api';
 import { useI18n } from 'vue-i18n';
@@ -28,9 +28,12 @@ export const useAuthStore = defineStore('Auth', () => {
 
     const { t } = useI18n();
     const state = reactive({
-        attemptingAutoLogin: false,
         autoLoginAttempts: new Set(),
-        loginForm: {
+        enableCustomEndpoint: false,
+        cachedConfig: {}
+    });
+
+    const loginForm = ref({
         loading: false,
         username: '',
         password: '',
@@ -53,8 +56,9 @@ export const useAuthStore = defineStore('Auth', () => {
                 }
             ]
         }
-        },
+    });
-        enablePrimaryPasswordDialog: {
+
+    const enablePrimaryPasswordDialog = ref({
         visible: false,
         password: '',
         rePassword: '',
@@ -62,95 +66,22 @@ export const useAuthStore = defineStore('Auth', () => {
             // $app._data.enablePrimaryPassword = false;
             done();
         }
-        },
-        saveCredentials: null,
-        // it's a flag
-        twoFactorAuthDialogVisible: false,
-        enableCustomEndpoint: false,
-        cachedConfig: {}
     });
 
-    async function init() {
+    const saveCredentials = ref(null);
-        const [savedCredentials, lastUserLoggedIn, enableCustomEndpoint] =
-            await Promise.all([
-                configRepository.getString('savedCredentials'),
-                configRepository.getString('lastUserLoggedIn'),
-                configRepository.getBool('VRCX_enableCustomEndpoint', false)
-            ]);
-        try {
-            state.loginForm = {
-                ...state.loginForm,
-                savedCredentials: savedCredentials
-                    ? JSON.parse(savedCredentials)
-                    : {},
-                lastUserLoggedIn
-            };
-        } catch (error) {
-            console.error('Failed to parse savedCredentials:', error);
-            state.loginForm = {
-                ...state.loginForm,
-                savedCredentials: {},
-                lastUserLoggedIn
-            };
-        }
-        state.enableCustomEndpoint = enableCustomEndpoint;
-    }
 
-    init();
+    const twoFactorAuthDialogVisible = ref(false);
 
-    const loginForm = computed({
+    const cachedConfig = ref({});
-        get: () => state.loginForm,
-        set: (value) => {
-            state.loginForm = value;
-        }
-    });
 
-    const enablePrimaryPasswordDialog = computed({
+    const enableCustomEndpoint = ref(false);
-        get: () => state.enablePrimaryPasswordDialog,
-        set: (value) => {
-            state.enablePrimaryPasswordDialog = value;
-        }
-    });
 
-    const saveCredentials = computed({
+    const attemptingAutoLogin = ref(false);
-        get: () => state.saveCredentials,
-        set: (value) => {
-            state.saveCredentials = value;
-        }
-    });
-
-    const twoFactorAuthDialogVisible = computed({
-        get: () => state.twoFactorAuthDialogVisible,
-        set: (value) => {
-            state.twoFactorAuthDialogVisible = value;
-        }
-    });
-
-    const cachedConfig = computed({
-        get: () => state.cachedConfig,
-        set: (value) => {
-            state.cachedConfig = value;
-        }
-    });
-
-    const enableCustomEndpoint = computed({
-        get: () => state.enableCustomEndpoint,
-        set: (value) => {
-            state.enableCustomEndpoint = value;
-        }
-    });
-
-    const attemptingAutoLogin = computed({
-        get: () => state.attemptingAutoLogin,
-        set: (value) => {
-            state.attemptingAutoLogin = value;
-        }
-    });
 
     watch(
         [() => watchState.isLoggedIn, () => userStore.currentUser],
         ([isLoggedIn, currentUser]) => {
-            state.twoFactorAuthDialogVisible = false;
+            twoFactorAuthDialogVisible.value = false;
             if (isLoggedIn) {
                 updateStoredUser(currentUser);
                 new Noty({
@@ -175,6 +106,34 @@ export const useAuthStore = defineStore('Auth', () => {
         { flush: 'sync' }
     );
 
+    async function init() {
+        const [savedCredentials, lastUserLoggedIn, enableCustomEndpoint] =
+            await Promise.all([
+                configRepository.getString('savedCredentials'),
+                configRepository.getString('lastUserLoggedIn'),
+                configRepository.getBool('VRCX_enableCustomEndpoint', false)
+            ]);
+        try {
+            loginForm.value = {
+                ...loginForm.value,
+                savedCredentials: savedCredentials
+                    ? JSON.parse(savedCredentials)
+                    : {},
+                lastUserLoggedIn
+            };
+        } catch (error) {
+            console.error('Failed to parse savedCredentials:', error);
+            loginForm.value = {
+                ...loginForm.value,
+                savedCredentials: {},
+                lastUserLoggedIn
+            };
+        }
+        state.enableCustomEndpoint = enableCustomEndpoint;
+    }
+
+    init();
+
     async function handleLogoutEvent() {
         if (watchState.isLoggedIn) {
             new Noty({
@@ -190,10 +149,10 @@ export const useAuthStore = defineStore('Auth', () => {
         notificationStore.notificationInitStatus = false;
         await updateStoredUser(userStore.currentUser);
         webApiService.clearCookies();
-        state.loginForm.lastUserLoggedIn = '';
+        loginForm.value.lastUserLoggedIn = '';
         await configRepository.remove('lastUserLoggedIn');
         // workerTimers.setTimeout(() => location.reload(), 500);
-        state.attemptingAutoLogin = false;
+        attemptingAutoLogin.value = false;
         state.autoLoginAttempts.clear();
         closeWebSocket();
     }
@@ -208,26 +167,26 @@ export const useAuthStore = defineStore('Auth', () => {
             (await configRepository.getString('lastUserLoggedIn')) !== null
         ) {
             const user =
-                state.loginForm.savedCredentials[
+                loginForm.value.savedCredentials[
-                    state.loginForm.lastUserLoggedIn
+                    loginForm.value.lastUserLoggedIn
                 ];
             if (user?.loginParmas?.endpoint) {
                 AppDebug.endpointDomain = user.loginParmas.endpoint;
                 AppDebug.websocketDomain = user.loginParmas.websocket;
             }
             // login at startup
-            state.loginForm.loading = true;
+            loginForm.value.loading = true;
             authRequest
                 .getConfig()
                 .catch((err) => {
-                    state.loginForm.loading = false;
+                    loginForm.value.loading = false;
                     throw err;
                 })
                 .then(() => {
                     userStore
                         .getCurrentUser()
                         .finally(() => {
-                            state.loginForm.loading = false;
+                            loginForm.value.loading = false;
                         })
                         .catch((err) => {
                             updateLoopStore.nextCurrentUserRefresh = 60; // 1min
@@ -239,10 +198,10 @@ export const useAuthStore = defineStore('Auth', () => {
 
     async function clearCookiesTryLogin() {
         await webApiService.clearCookies();
-        if (state.loginForm.lastUserLoggedIn) {
+        if (loginForm.value.lastUserLoggedIn) {
             const user =
-                state.loginForm.savedCredentials[
+                loginForm.value.savedCredentials[
-                    state.loginForm.lastUserLoggedIn
+                    loginForm.value.lastUserLoggedIn
                 ];
             if (typeof user !== 'undefined') {
                 delete user.cookies;
@@ -252,10 +211,10 @@ export const useAuthStore = defineStore('Auth', () => {
     }
 
     async function resendEmail2fa() {
-        if (state.loginForm.lastUserLoggedIn) {
+        if (loginForm.value.lastUserLoggedIn) {
             const user =
-                state.loginForm.savedCredentials[
+                loginForm.value.savedCredentials[
-                    state.loginForm.lastUserLoggedIn
+                    loginForm.value.lastUserLoggedIn
                 ];
             if (typeof user !== 'undefined') {
                 await webApiService.clearCookies();
@@ -279,10 +238,10 @@ export const useAuthStore = defineStore('Auth', () => {
         advancedSettingsStore.enablePrimaryPassword =
             !advancedSettingsStore.enablePrimaryPassword;
 
-        state.enablePrimaryPasswordDialog.password = '';
+        enablePrimaryPasswordDialog.value.password = '';
-        state.enablePrimaryPasswordDialog.rePassword = '';
+        enablePrimaryPasswordDialog.value.rePassword = '';
         if (advancedSettingsStore.enablePrimaryPassword) {
-            state.enablePrimaryPasswordDialog.visible = true;
+            enablePrimaryPasswordDialog.value.visible = true;
         } else {
             ElMessageBox.prompt(
                 t('prompt.primary_password.description'),
@@ -293,22 +252,22 @@ export const useAuthStore = defineStore('Auth', () => {
                 }
             )
                 .then(({ value }) => {
-                    for (const userId in state.loginForm.savedCredentials) {
+                    for (const userId in loginForm.value.savedCredentials) {
                         security
                             .decrypt(
-                                state.loginForm.savedCredentials[userId]
+                                loginForm.value.savedCredentials[userId]
                                     .loginParmas.password,
                                 value
                             )
                             .then(async (pt) => {
-                                state.saveCredentials = {
+                                saveCredentials.value = {
                                     username:
-                                        state.loginForm.savedCredentials[userId]
+                                        loginForm.value.savedCredentials[userId]
                                             .loginParmas.username,
                                     password: pt
                                 };
                                 await updateStoredUser(
-                                    state.loginForm.savedCredentials[userId]
+                                    loginForm.value.savedCredentials[userId]
                                         .user
                                 );
                                 await configRepository.setBool(
@@ -337,25 +296,25 @@ export const useAuthStore = defineStore('Auth', () => {
             'enablePrimaryPassword',
             advancedSettingsStore.enablePrimaryPassword
         );
-        state.enablePrimaryPasswordDialog.visible = false;
+        enablePrimaryPasswordDialog.value.visible = false;
         if (advancedSettingsStore.enablePrimaryPassword) {
-            const key = state.enablePrimaryPasswordDialog.password;
+            const key = enablePrimaryPasswordDialog.value.password;
-            for (const userId in state.loginForm.savedCredentials) {
+            for (const userId in loginForm.value.savedCredentials) {
                 security
                     .encrypt(
-                        state.loginForm.savedCredentials[userId].loginParmas
+                        loginForm.value.savedCredentials[userId].loginParmas
                             .password,
                         key
                     )
                     .then((ct) => {
-                        state.saveCredentials = {
+                        saveCredentials.value = {
                             username:
-                                state.loginForm.savedCredentials[userId]
+                                loginForm.value.savedCredentials[userId]
                                     .loginParmas.username,
                             password: ct
                         };
                         updateStoredUser(
-                            state.loginForm.savedCredentials[userId].user
+                            loginForm.value.savedCredentials[userId].user
                         );
                     });
             }
@@ -369,25 +328,25 @@ export const useAuthStore = defineStore('Auth', () => {
                 await configRepository.getString('savedCredentials')
             );
         }
-        if (state.saveCredentials) {
+        if (saveCredentials.value) {
             const credentialsToSave = {
                 user,
-                loginParmas: state.saveCredentials
+                loginParmas: saveCredentials.value
             };
             savedCredentials[user.id] = credentialsToSave;
-            state.saveCredentials = null;
+            saveCredentials.value = null;
         } else if (typeof savedCredentials[user.id] !== 'undefined') {
             savedCredentials[user.id].user = user;
             savedCredentials[user.id].cookies =
                 await webApiService.getCookies();
         }
-        state.loginForm.savedCredentials = savedCredentials;
+        loginForm.value.savedCredentials = savedCredentials;
         const jsonCredentialsArray = JSON.stringify(savedCredentials);
         await configRepository.setString(
             'savedCredentials',
             jsonCredentialsArray
         );
-        state.loginForm.lastUserLoggedIn = user.id;
+        loginForm.value.lastUserLoggedIn = user.id;
         await configRepository.setString('lastUserLoggedIn', user.id);
     }
 
@@ -439,8 +398,8 @@ export const useAuthStore = defineStore('Auth', () => {
             'VRCX_enableCustomEndpoint',
             state.enableCustomEndpoint
         );
-        state.loginForm.endpoint = '';
+        loginForm.value.endpoint = '';
-        state.loginForm.websocket = '';
+        loginForm.value.websocket = '';
     }
 
     function logout() {
@@ -468,7 +427,7 @@ export const useAuthStore = defineStore('Auth', () => {
         if (user.cookies) {
             await webApiService.setCookies(user.cookies);
         }
-        state.loginForm.lastUserLoggedIn = user.user.id; // for resend email 2fa
+        loginForm.value.lastUserLoggedIn = user.user.id; // for resend email 2fa
         if (loginParmas.endpoint) {
             AppDebug.endpointDomain = loginParmas.endpoint;
             AppDebug.websocketDomain = loginParmas.websocket;
@@ -477,7 +436,7 @@ export const useAuthStore = defineStore('Auth', () => {
             AppDebug.websocketDomain = AppDebug.websocketDomainVrchat;
         }
         return new Promise((resolve, reject) => {
-            state.loginForm.loading = true;
+            loginForm.value.loading = true;
             if (advancedSettingsStore.enablePrimaryPassword) {
                 checkPrimaryPassword(loginParmas)
                     .then((pwd) => {
@@ -531,7 +490,7 @@ export const useAuthStore = defineStore('Auth', () => {
                             });
                     });
             }
-        }).finally(() => (state.loginForm.loading = false));
+        }).finally(() => (loginForm.value.loading = false));
     }
 
     async function deleteSavedLogin(userId) {
@@ -546,7 +505,7 @@ export const useAuthStore = defineStore('Auth', () => {
                 false
             );
         }
-        state.loginForm.savedCredentials = savedCredentials;
+        loginForm.value.savedCredentials = savedCredentials;
         const jsonCredentials = JSON.stringify(savedCredentials);
         await configRepository.setString('savedCredentials', jsonCredentials);
         new Noty({
@@ -558,11 +517,11 @@ export const useAuthStore = defineStore('Auth', () => {
     async function login() {
         // TODO: remove/refactor saveCredentials & primaryPassword (security)
         await webApiService.clearCookies();
-        if (!state.loginForm.loading) {
+        if (!loginForm.value.loading) {
-            state.loginForm.loading = true;
+            loginForm.value.loading = true;
-            if (state.loginForm.endpoint) {
+            if (loginForm.value.endpoint) {
-                AppDebug.endpointDomain = state.loginForm.endpoint;
+                AppDebug.endpointDomain = loginForm.value.endpoint;
-                AppDebug.websocketDomain = state.loginForm.websocket;
+                AppDebug.websocketDomain = loginForm.value.websocket;
             } else {
                 AppDebug.endpointDomain = AppDebug.endpointDomainVrchat;
                 AppDebug.websocketDomain = AppDebug.websocketDomainVrchat;
@@ -570,12 +529,12 @@ export const useAuthStore = defineStore('Auth', () => {
             authRequest
                 .getConfig()
                 .catch((err) => {
-                    state.loginForm.loading = false;
+                    loginForm.value.loading = false;
                     throw err;
                 })
                 .then((args) => {
                     if (
-                        state.loginForm.saveCredentials &&
+                        loginForm.value.saveCredentials &&
                         advancedSettingsStore.enablePrimaryPassword
                     ) {
                         ElMessageBox.prompt(
@@ -588,9 +547,9 @@ export const useAuthStore = defineStore('Auth', () => {
                         )
                             .then(({ value }) => {
                                 const saveCredential =
-                                    state.loginForm.savedCredentials[
+                                    loginForm.value.savedCredentials[
                                         Object.keys(
-                                            state.loginForm.savedCredentials
+                                            loginForm.value.savedCredentials
                                         )[0]
                                     ];
                                 security
@@ -601,25 +560,25 @@ export const useAuthStore = defineStore('Auth', () => {
                                     .then(() => {
                                         security
                                             .encrypt(
-                                                state.loginForm.password,
+                                                loginForm.value.password,
                                                 value
                                             )
                                             .then((pwd) => {
                                                 authLogin({
                                                     username:
-                                                        state.loginForm
+                                                        loginForm.value
                                                             .username,
                                                     password:
-                                                        state.loginForm
+                                                        loginForm.value
                                                             .password,
                                                     endpoint:
-                                                        state.loginForm
+                                                        loginForm.value
                                                             .endpoint,
                                                     websocket:
-                                                        state.loginForm
+                                                        loginForm.value
                                                             .websocket,
                                                     saveCredentials:
-                                                        state.loginForm
+                                                        loginForm.value
                                                             .saveCredentials,
                                                     cipher: pwd
                                                 });
@@ -627,18 +586,18 @@ export const useAuthStore = defineStore('Auth', () => {
                                     });
                             })
                             .finally(() => {
-                                state.loginForm.loading = false;
+                                loginForm.value.loading = false;
                             });
                         return args;
                     }
                     authLogin({
-                        username: state.loginForm.username,
+                        username: loginForm.value.username,
-                        password: state.loginForm.password,
+                        password: loginForm.value.password,
-                        endpoint: state.loginForm.endpoint,
+                        endpoint: loginForm.value.endpoint,
-                        websocket: state.loginForm.websocket,
+                        websocket: loginForm.value.websocket,
-                        saveCredentials: state.loginForm.saveCredentials
+                        saveCredentials: loginForm.value.saveCredentials
                     }).finally(() => {
-                        state.loginForm.loading = false;
+                        loginForm.value.loading = false;
                     });
                     return args;
                 });
@@ -646,11 +605,11 @@ export const useAuthStore = defineStore('Auth', () => {
     }
 
     function promptTOTP() {
-        if (state.twoFactorAuthDialogVisible) {
+        if (twoFactorAuthDialogVisible.value) {
             return;
         }
         AppApi.FlashWindow();
-        state.twoFactorAuthDialogVisible = true;
+        twoFactorAuthDialogVisible.value = true;
         ElMessageBox.prompt(
             t('prompt.totp.description'),
             t('prompt.totp.header'),
@@ -662,7 +621,7 @@ export const useAuthStore = defineStore('Auth', () => {
                 inputPattern: /^[0-9]{6}$/,
                 inputErrorMessage: t('prompt.totp.input_error'),
                 beforeClose: (action, instance, done) => {
-                    state.twoFactorAuthDialogVisible = false;
+                    twoFactorAuthDialogVisible.value = false;
                     if (action === 'cancel') {
                         promptOTP();
                     }
@@ -687,10 +646,10 @@ export const useAuthStore = defineStore('Auth', () => {
     }
 
     function promptOTP() {
-        if (state.twoFactorAuthDialogVisible) {
+        if (twoFactorAuthDialogVisible.value) {
             return;
         }
-        state.twoFactorAuthDialogVisible = true;
+        twoFactorAuthDialogVisible.value = true;
         ElMessageBox.prompt(
             t('prompt.otp.description'),
             t('prompt.otp.header'),
@@ -702,7 +661,7 @@ export const useAuthStore = defineStore('Auth', () => {
                 inputPattern: /^[a-z0-9]{4}-[a-z0-9]{4}$/,
                 inputErrorMessage: t('prompt.otp.input_error'),
                 beforeClose: (action, instance, done) => {
-                    state.twoFactorAuthDialogVisible = false;
+                    twoFactorAuthDialogVisible.value = false;
                     if (action === 'cancel') {
                         promptTOTP();
                     }
@@ -727,11 +686,11 @@ export const useAuthStore = defineStore('Auth', () => {
     }
 
     function promptEmailOTP() {
-        if (state.twoFactorAuthDialogVisible) {
+        if (twoFactorAuthDialogVisible.value) {
             return;
         }
         AppApi.FlashWindow();
-        state.twoFactorAuthDialogVisible = true;
+        twoFactorAuthDialogVisible.value = true;
         ElMessageBox.prompt(
             t('prompt.email_otp.description'),
             t('prompt.email_otp.header'),
@@ -743,7 +702,7 @@ export const useAuthStore = defineStore('Auth', () => {
                 inputPattern: /^[0-9]{6}$/,
                 inputErrorMessage: t('prompt.email_otp.input_error'),
                 beforeClose: (action, instance, done) => {
-                    state.twoFactorAuthDialogVisible = false;
+                    twoFactorAuthDialogVisible.value = false;
                     if (action === 'cancel') {
                         resendEmail2fa();
                         return;
@@ -783,7 +742,7 @@ export const useAuthStore = defineStore('Auth', () => {
                 params.password = cipher;
                 delete params.cipher;
             }
-            state.saveCredentials = params;
+            saveCredentials.value = params;
         }
         return request('auth/user', {
             method: 'GET',
@@ -816,21 +775,21 @@ export const useAuthStore = defineStore('Auth', () => {
     }
 
     function handleAutoLogin() {
-        if (state.attemptingAutoLogin) {
+        if (attemptingAutoLogin.value) {
             return;
         }
-        state.attemptingAutoLogin = true;
+        attemptingAutoLogin.value = true;
         const user =
-            state.loginForm.savedCredentials[state.loginForm.lastUserLoggedIn];
+            loginForm.value.savedCredentials[loginForm.value.lastUserLoggedIn];
         if (typeof user === 'undefined') {
-            state.attemptingAutoLogin = false;
+            attemptingAutoLogin.value = false;
             return;
         }
         if (advancedSettingsStore.enablePrimaryPassword) {
             console.error(
                 'Primary password is enabled, this disables auto login.'
             );
-            state.attemptingAutoLogin = false;
+            attemptingAutoLogin.value = false;
             handleLogoutEvent();
             return;
         }
@@ -841,7 +800,7 @@ export const useAuthStore = defineStore('Auth', () => {
             console.error(
                 'More than 3 auto login attempts within the past hour, logging out instead of attempting auto login.'
             );
-            state.attemptingAutoLogin = false;
+            attemptingAutoLogin.value = false;
             handleLogoutEvent();
             return;
         }

src/stores/avatar.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch, nextTick } from 'vue';
+import { ref, watch, nextTick } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { avatarRequest, miscRequest } from '../api';
 import { database } from '../service/database';
@@ -28,8 +28,11 @@ export const useAvatarStore = defineStore('Avatar', () => {
     const advancedSettingsStore = useAdvancedSettingsStore();
     const userStore = useUserStore();
 
-    const state = reactive({
+    let cachedAvatarModerations = new Map();
-        avatarDialog: {
+    let cachedAvatars = new Map();
+    let cachedAvatarNames = new Map();
+
+    const avatarDialog = ref({
         visible: false,
         loading: false,
         id: '',
@@ -53,38 +56,19 @@ export const useAvatarStore = defineStore('Avatar', () => {
         cacheLocked: false,
         cachePath: '',
         fileAnalysis: []
-        },
-        avatarHistory: new Set(),
-        avatarHistoryArray: []
-    });
-
-    let cachedAvatarModerations = new Map();
-    let cachedAvatars = new Map();
-    let cachedAvatarNames = new Map();
-
-    const avatarDialog = computed({
-        get: () => state.avatarDialog,
-        set: (value) => {
-            state.avatarDialog = value;
-        }
-    });
-    const avatarHistory = state.avatarHistory;
-    const avatarHistoryArray = computed({
-        get: () => state.avatarHistoryArray,
-        set: (value) => {
-            state.avatarHistoryArray = value;
-        }
     });
+    const avatarHistory = ref(new Set());
+    const avatarHistoryArray = ref([]);
 
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
-            state.avatarDialog.visible = false;
+            avatarDialog.value.visible = false;
             cachedAvatars.clear();
             cachedAvatarNames.clear();
             cachedAvatarModerations.clear();
-            state.avatarHistory.clear();
+            avatarHistory.value.clear();
-            state.avatarHistoryArray = [];
+            avatarHistoryArray.value = [];
             if (isLoggedIn) {
                 getAvatarHistory();
             }
@@ -183,7 +167,7 @@ export const useAvatarStore = defineStore('Avatar', () => {
      * @returns
      */
     function showAvatarDialog(avatarId) {
-        const D = state.avatarDialog;
+        const D = avatarDialog.value;
         D.visible = true;
         D.loading = true;
         D.id = avatarId;
@@ -266,7 +250,7 @@ export const useAvatarStore = defineStore('Avatar', () => {
      * @returns {Promise<string[]>}
      */
     async function getAvatarGallery(avatarId) {
-        const D = state.avatarDialog;
+        const D = avatarDialog.value;
         const args = await avatarRequest
             .getAvatarGallery(avatarId)
             .finally(() => {
@@ -318,7 +302,7 @@ export const useAvatarStore = defineStore('Avatar', () => {
         }
 
         // update avatar dialog
-        const D = state.avatarDialog;
+        const D = avatarDialog.value;
         if (
             D.visible &&
             ref.avatarModerationType === 'block' &&
@@ -331,7 +315,7 @@ export const useAvatarStore = defineStore('Avatar', () => {
     }
 
     function updateVRChatAvatarCache() {
-        const D = state.avatarDialog;
+        const D = avatarDialog.value;
         if (D.visible) {
             D.inCache = false;
             D.cacheSize = '';
@@ -353,7 +337,7 @@ export const useAvatarStore = defineStore('Avatar', () => {
      * @returns {Promise<void>}
      */
     async function getAvatarHistory() {
-        state.avatarHistory = new Set();
+        avatarHistory.value = new Set();
         const historyArray = await database.getAvatarHistory(
             userStore.currentUser.id
         );
@@ -363,9 +347,9 @@ export const useAvatarStore = defineStore('Avatar', () => {
                 continue;
             }
             applyAvatar(avatar);
-            state.avatarHistory.add(avatar.id);
+            avatarHistory.value.add(avatar.id);
         }
-        state.avatarHistoryArray = historyArray;
+        avatarHistoryArray.value = historyArray;
     }
 
     /**
@@ -384,16 +368,16 @@ export const useAvatarStore = defineStore('Avatar', () => {
                     return;
                 }
 
-                const historyArray = state.avatarHistoryArray;
+                const historyArray = avatarHistoryArray.value;
                 for (let i = 0; i < historyArray.length; ++i) {
                     if (historyArray[i].id === ref.id) {
                         historyArray.splice(i, 1);
                     }
                 }
 
-                state.avatarHistoryArray.unshift(ref);
+                avatarHistoryArray.value.unshift(ref);
-                state.avatarHistory.delete(ref.id);
+                avatarHistory.value.delete(ref.id);
-                state.avatarHistory.add(ref.id);
+                avatarHistory.value.add(ref.id);
             })
             .catch((err) => {
                 console.error('Failed to add avatar to history:', err);
@@ -401,8 +385,8 @@ export const useAvatarStore = defineStore('Avatar', () => {
     }
 
     function clearAvatarHistory() {
-        state.avatarHistory = new Set();
+        avatarHistory.value = new Set();
-        state.avatarHistoryArray = [];
+        avatarHistoryArray.value = [];
         database.clearAvatarHistory();
     }
 
@@ -687,8 +671,6 @@ export const useAvatarStore = defineStore('Avatar', () => {
     }
 
     return {
-        state,
-
         avatarDialog,
         avatarHistory,
         avatarHistoryArray,

src/stores/avatarProvider.js

@@ -1,39 +1,47 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { ref, watch } from 'vue';
 import configRepository from '../service/config';
 import { watchState } from '../service/watchState';
 import { useAdvancedSettingsStore } from './settings/advanced';
 
 export const useAvatarProviderStore = defineStore('AvatarProvider', () => {
     const advancedSettingsStore = useAdvancedSettingsStore();
-    const state = reactive({
-        isAvatarProviderDialogVisible: false,
 
-        avatarRemoteDatabaseProvider: '',
+    const isAvatarProviderDialogVisible = ref(false);
-        avatarRemoteDatabaseProviderList: [
+
+    const avatarRemoteDatabaseProvider = ref('');
+
+    const avatarRemoteDatabaseProviderList = ref([
         'https://api.avtrdb.com/v2/avatar/search/vrcx',
         'https://avtr.just-h.party/vrcx_search.php'
-        ]
+    ]);
-    });
+
+    watch(
+        () => watchState.isLoggedIn,
+        () => {
+            isAvatarProviderDialogVisible.value = false;
+        },
+        { flush: 'sync' }
+    );
 
     async function initAvatarProviderState() {
-        state.avatarRemoteDatabaseProviderList = JSON.parse(
+        avatarRemoteDatabaseProviderList.value = JSON.parse(
             await configRepository.getString(
                 'VRCX_avatarRemoteDatabaseProviderList',
                 '[ "https://api.avtrdb.com/v2/avatar/search/vrcx", "https://avtr.just-h.party/vrcx_search.php" ]'
             )
         );
         if (
-            state.avatarRemoteDatabaseProviderList.length === 1 &&
+            avatarRemoteDatabaseProviderList.value.length === 1 &&
-            state.avatarRemoteDatabaseProviderList[0] ===
+            avatarRemoteDatabaseProviderList.value[0] ===
                 'https://avtr.just-h.party/vrcx_search.php'
         ) {
-            state.avatarRemoteDatabaseProviderList.unshift(
+            avatarRemoteDatabaseProviderList.value.unshift(
                 'https://api.avtrdb.com/v2/avatar/search/vrcx'
             );
             await configRepository.setString(
                 'VRCX_avatarRemoteDatabaseProviderList',
-                JSON.stringify(state.avatarRemoteDatabaseProviderList)
+                JSON.stringify(avatarRemoteDatabaseProviderList.value)
             );
         }
 
@@ -48,61 +56,26 @@ export const useAvatarProviderStore = defineStore('AvatarProvider', () => {
                     'VRCX_avatarRemoteDatabaseProvider'
                 );
             if (
-                !state.avatarRemoteDatabaseProviderList.includes(
+                !avatarRemoteDatabaseProviderList.value.includes(
                     avatarRemoteDatabaseProvider
                 )
             ) {
-                state.avatarRemoteDatabaseProviderList.push(
+                avatarRemoteDatabaseProviderList.value.push(
                     avatarRemoteDatabaseProvider
                 );
             }
             await configRepository.remove('VRCX_avatarRemoteDatabaseProvider');
             await configRepository.setString(
                 'VRCX_avatarRemoteDatabaseProviderList',
-                JSON.stringify(state.avatarRemoteDatabaseProviderList)
+                JSON.stringify(avatarRemoteDatabaseProviderList.value)
             );
         }
-        if (state.avatarRemoteDatabaseProviderList.length > 0) {
+        if (avatarRemoteDatabaseProviderList.value.length > 0) {
-            state.avatarRemoteDatabaseProvider =
+            avatarRemoteDatabaseProvider.value =
-                state.avatarRemoteDatabaseProviderList[0];
+                avatarRemoteDatabaseProviderList.value[0];
         }
     }
 
-    const isAvatarProviderDialogVisible = computed({
-        get() {
-            return state.isAvatarProviderDialogVisible;
-        },
-        set(value) {
-            state.isAvatarProviderDialogVisible = value;
-        }
-    });
-
-    const avatarRemoteDatabaseProvider = computed({
-        get() {
-            return state.avatarRemoteDatabaseProvider;
-        },
-        set(value) {
-            state.avatarRemoteDatabaseProvider = value;
-        }
-    });
-
-    const avatarRemoteDatabaseProviderList = computed({
-        get() {
-            return state.avatarRemoteDatabaseProviderList;
-        },
-        set(value) {
-            state.avatarRemoteDatabaseProviderList = value;
-        }
-    });
-
-    watch(
-        () => watchState.isLoggedIn,
-        () => {
-            state.isAvatarProviderDialogVisible = false;
-        },
-        { flush: 'sync' }
-    );
-
     /**
      * @param {string} url
      */
@@ -111,8 +84,8 @@ export const useAvatarProviderStore = defineStore('AvatarProvider', () => {
             return;
         }
         showAvatarProviderDialog();
-        if (!state.avatarRemoteDatabaseProviderList.includes(url)) {
+        if (!avatarRemoteDatabaseProviderList.value.includes(url)) {
-            state.avatarRemoteDatabaseProviderList.push(url);
+            avatarRemoteDatabaseProviderList.value.push(url);
         }
         saveAvatarProviderList();
     }
@@ -121,52 +94,50 @@ export const useAvatarProviderStore = defineStore('AvatarProvider', () => {
      * @param {string} url
      */
     function removeAvatarProvider(url) {
-        const length = state.avatarRemoteDatabaseProviderList.length;
+        const length = avatarRemoteDatabaseProviderList.value.length;
         for (let i = 0; i < length; ++i) {
-            if (state.avatarRemoteDatabaseProviderList[i] === url) {
+            if (avatarRemoteDatabaseProviderList.value[i] === url) {
-                state.avatarRemoteDatabaseProviderList.splice(i, 1);
+                avatarRemoteDatabaseProviderList.value.splice(i, 1);
             }
         }
         saveAvatarProviderList();
     }
 
     async function saveAvatarProviderList() {
-        const length = state.avatarRemoteDatabaseProviderList.length;
+        const length = avatarRemoteDatabaseProviderList.value.length;
         for (let i = 0; i < length; ++i) {
-            if (!state.avatarRemoteDatabaseProviderList[i]) {
+            if (!avatarRemoteDatabaseProviderList.value[i]) {
-                state.avatarRemoteDatabaseProviderList.splice(i, 1);
+                avatarRemoteDatabaseProviderList.value.splice(i, 1);
             }
         }
         await configRepository.setString(
             'VRCX_avatarRemoteDatabaseProviderList',
-            JSON.stringify(state.avatarRemoteDatabaseProviderList)
+            JSON.stringify(avatarRemoteDatabaseProviderList.value)
         );
-        if (state.avatarRemoteDatabaseProviderList.length > 0) {
+        if (avatarRemoteDatabaseProviderList.value.length > 0) {
-            state.avatarRemoteDatabaseProvider =
+            avatarRemoteDatabaseProvider.value =
-                state.avatarRemoteDatabaseProviderList[0];
+                avatarRemoteDatabaseProviderList.value[0];
             advancedSettingsStore.setAvatarRemoteDatabase(true);
         } else {
-            state.avatarRemoteDatabaseProvider = '';
+            avatarRemoteDatabaseProvider.value = '';
             advancedSettingsStore.setAvatarRemoteDatabase(false);
         }
     }
 
     function showAvatarProviderDialog() {
-        state.isAvatarProviderDialogVisible = true;
+        isAvatarProviderDialogVisible.value = true;
     }
 
     /**
      * @param {string} provider
      */
     function setAvatarProvider(provider) {
-        state.avatarRemoteDatabaseProvider = provider;
+        avatarRemoteDatabaseProvider.value = provider;
     }
 
     initAvatarProviderState();
 
     return {
-        state,
-
         isAvatarProviderDialogVisible,
         avatarRemoteDatabaseProvider,
         avatarRemoteDatabaseProviderList,

src/stores/feed.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { ref, watch } from 'vue';
 import configRepository from '../service/config';
 import { database } from '../service/database';
 import { watchState } from '../service/watchState';
@@ -16,8 +16,7 @@ export const useFeedStore = defineStore('Feed', () => {
     const vrcxStore = useVrcxStore();
     const sharedFeedStore = useSharedFeedStore();
 
-    const state = reactive({
+    const feedTable = ref({
-        feedTable: {
         data: [],
         search: '',
         vip: false,
@@ -37,41 +36,15 @@ export const useFeedStore = defineStore('Feed', () => {
             layout: 'sizes,prev,pager,next,total',
             pageSizes: [10, 15, 20, 25, 50, 100]
         }
-        },
-        feedSessionTable: []
     });
 
-    async function init() {
+    const feedSessionTable = ref([]);
-        state.feedTable.filter = JSON.parse(
-            await configRepository.getString('VRCX_feedTableFilters', '[]')
-        );
-        state.feedTable.vip = await configRepository.getBool(
-            'VRCX_feedTableVIPFilter',
-            false
-        );
-    }
-
-    init();
-
-    const feedTable = computed({
-        get: () => state.feedTable,
-        set: (value) => {
-            state.feedTable = value;
-        }
-    });
-
-    const feedSessionTable = computed({
-        get: () => state.feedSessionTable,
-        set: (value) => {
-            state.feedSessionTable = value;
-        }
-    });
 
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
-            state.feedTable.data = [];
+            feedTable.value.data = [];
-            state.feedSessionTable = [];
+            feedSessionTable.value = [];
             if (isLoggedIn) {
                 initFeedTable();
             }
@@ -82,14 +55,26 @@ export const useFeedStore = defineStore('Feed', () => {
     watch(
         () => watchState.isFavoritesLoaded,
         (isFavoritesLoaded) => {
-            if (isFavoritesLoaded && state.feedTable.vip) {
+            if (isFavoritesLoaded && feedTable.value.vip) {
                 feedTableLookup(); // re-apply VIP filter after friends are loaded
             }
         }
     );
 
+    async function init() {
+        feedTable.value.filter = JSON.parse(
+            await configRepository.getString('VRCX_feedTableFilters', '[]')
+        );
+        feedTable.value.vip = await configRepository.getBool(
+            'VRCX_feedTableVIPFilter',
+            false
+        );
+    }
+
+    init();
+
     function feedSearch(row) {
-        const value = state.feedTable.search.toUpperCase();
+        const value = feedTable.value.search.toUpperCase();
         if (!value) {
             return true;
         }
@@ -163,37 +148,37 @@ export const useFeedStore = defineStore('Feed', () => {
     async function feedTableLookup() {
         await configRepository.setString(
             'VRCX_feedTableFilters',
-            JSON.stringify(state.feedTable.filter)
+            JSON.stringify(feedTable.value.filter)
         );
         await configRepository.setBool(
             'VRCX_feedTableVIPFilter',
-            state.feedTable.vip
+            feedTable.value.vip
         );
-        state.feedTable.loading = true;
+        feedTable.value.loading = true;
         let vipList = [];
-        if (state.feedTable.vip) {
+        if (feedTable.value.vip) {
             vipList = Array.from(friendStore.localFavoriteFriends.values());
         }
-        state.feedTable.data = await database.lookupFeedDatabase(
+        feedTable.value.data = await database.lookupFeedDatabase(
-            state.feedTable.search,
+            feedTable.value.search,
-            state.feedTable.filter,
+            feedTable.value.filter,
             vipList
         );
-        state.feedTable.loading = false;
+        feedTable.value.loading = false;
     }
 
     function addFeed(feed) {
         notificationStore.queueFeedNoty(feed);
-        state.feedSessionTable.push(feed);
+        feedSessionTable.value.push(feed);
         sharedFeedStore.updateSharedFeed(false);
         if (
-            state.feedTable.filter.length > 0 &&
+            feedTable.value.filter.length > 0 &&
-            !state.feedTable.filter.includes(feed.type)
+            !feedTable.value.filter.includes(feed.type)
         ) {
             return;
         }
         if (
-            state.feedTable.vip &&
+            feedTable.value.vip &&
             !friendStore.localFavoriteFriends.has(feed.userId)
         ) {
             return;
@@ -201,14 +186,14 @@ export const useFeedStore = defineStore('Feed', () => {
         if (!feedSearch(feed)) {
             return;
         }
-        state.feedTable.data.push(feed);
+        feedTable.value.data.push(feed);
         sweepFeed();
         UiStore.notifyMenu('feed');
     }
 
     function sweepFeed() {
         let limit;
-        const { data } = state.feedTable;
+        const { data } = feedTable.value;
         const j = data.length;
         if (j > vrcxStore.maxTableSize) {
             data.splice(0, j - vrcxStore.maxTableSize);
@@ -218,27 +203,25 @@ export const useFeedStore = defineStore('Feed', () => {
         date.setDate(date.getDate() - 1); // 24 hour limit
         limit = date.toJSON();
         let i = 0;
-        const k = state.feedSessionTable.length;
+        const k = feedSessionTable.value.length;
-        while (i < k && state.feedSessionTable[i].created_at < limit) {
+        while (i < k && feedSessionTable.value[i].created_at < limit) {
             ++i;
         }
         if (i === k) {
-            state.feedSessionTable = [];
+            feedSessionTable.value = [];
         } else if (i) {
-            state.feedSessionTable.splice(0, i);
+            feedSessionTable.value.splice(0, i);
         }
     }
 
     async function initFeedTable() {
-        state.feedTable.loading = true;
+        feedTable.value.loading = true;
 
         feedTableLookup();
-        state.feedSessionTable = await database.getFeedDatabase();
+        feedSessionTable.value = await database.getFeedDatabase();
     }
 
     return {
-        state,
-
         feedTable,
         feedSessionTable,
         initFeedTable,

src/stores/friend.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { ref, computed, reactive, watch } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import * as workerTimers from 'worker-timers';
 import { friendRequest, userRequest } from '../api';
@@ -45,11 +45,19 @@ export const useFriendStore = defineStore('Friend', () => {
     const { t } = useI18n();
 
     const state = reactive({
-        friends: new Map(),
+        friendNumber: 0
-        localFavoriteFriends: new Set(),
+    });
-        isRefreshFriendsLoading: false,
+
-        onlineFriendCount: 0,
+    let friendLog = new Map();
-        friendLogTable: {
+
+    const friends = ref(new Map());
+
+    const localFavoriteFriends = ref(new Set());
+
+    const isRefreshFriendsLoading = ref(false);
+    const onlineFriendCount = ref(0);
+
+    const friendLogTable = ref({
         data: [],
         filters: [
             {
@@ -83,41 +91,10 @@ export const useFriendStore = defineStore('Friend', () => {
             layout: 'sizes,prev,pager,next,total',
             pageSizes: [10, 15, 20, 25, 50, 100]
         }
-        },
-        friendNumber: 0
     });
 
-    let friendLog = new Map();
-
-    const friends = computed({
-        get() {
-            return state.friends;
-        },
-        set(value) {
-            state.friends = value;
-        }
-    });
-
-    const localFavoriteFriends = computed({
-        get() {
-            return state.localFavoriteFriends;
-        },
-        set(value) {
-            state.localFavoriteFriends = value;
-        }
-    });
-
-    async function init() {
-        const friendLogTableFiltersValue = JSON.parse(
-            await configRepository.getString('VRCX_friendLogTableFilters', '[]')
-        );
-        state.friendLogTable.filters[0].value = friendLogTableFiltersValue;
-    }
-
-    init();
-
     const vipFriends = computed(() => {
-        return Array.from(state.friends.values())
+        return Array.from(friends.value.values())
             .filter((f) => f.state === 'online' && f.isVIP)
             .sort(
                 getFriendsSortFunction(
@@ -127,7 +104,7 @@ export const useFriendStore = defineStore('Friend', () => {
     });
 
     const onlineFriends = computed(() => {
-        return Array.from(state.friends.values())
+        return Array.from(friends.value.values())
             .filter((f) => f.state === 'online' && !f.isVIP)
             .sort(
                 getFriendsSortFunction(
@@ -137,7 +114,7 @@ export const useFriendStore = defineStore('Friend', () => {
     });
 
     const activeFriends = computed(() => {
-        return Array.from(state.friends.values())
+        return Array.from(friends.value.values())
             .filter((f) => f.state === 'active')
             .sort(
                 getFriendsSortFunction(
@@ -147,7 +124,7 @@ export const useFriendStore = defineStore('Friend', () => {
     });
 
     const offlineFriends = computed(() => {
-        return Array.from(state.friends.values())
+        return Array.from(friends.value.values())
             .filter((f) => f.state === 'offline' || !f.state)
             .sort(
                 getFriendsSortFunction(
@@ -156,41 +133,15 @@ export const useFriendStore = defineStore('Friend', () => {
             );
     });
 
-    const isRefreshFriendsLoading = computed({
-        get() {
-            return state.isRefreshFriendsLoading;
-        },
-        set(value) {
-            state.isRefreshFriendsLoading = value;
-        }
-    });
-    const onlineFriendCount = computed({
-        get() {
-            return state.onlineFriendCount;
-        },
-        set(value) {
-            state.onlineFriendCount = value;
-        }
-    });
-
-    const friendLogTable = computed({
-        get() {
-            return state.friendLogTable;
-        },
-        set(value) {
-            state.friendLogTable = value;
-        }
-    });
-
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
-            state.friends.clear();
+            friends.value.clear();
             state.friendNumber = 0;
             friendLog.clear();
-            state.friendLogTable.data = [];
+            friendLogTable.value.data = [];
             groupStore.groupInstances = [];
-            state.onlineFriendCount = 0;
+            onlineFriendCount.value = 0;
             if (isLoggedIn) {
                 initFriendsList();
             }
@@ -208,6 +159,15 @@ export const useFriendStore = defineStore('Friend', () => {
         { flush: 'sync' }
     );
 
+    async function init() {
+        const friendLogTableFiltersValue = JSON.parse(
+            await configRepository.getString('VRCX_friendLogTableFilters', '[]')
+        );
+        friendLogTable.value.filters[0].value = friendLogTableFiltersValue;
+    }
+
+    init();
+
     function updateUserCurrentStatus(ref) {
         if (watchState.isFriendsLoaded) {
             refreshFriendsStatus(ref);
@@ -280,7 +240,7 @@ export const useFriendStore = defineStore('Friend', () => {
     function updateLocalFavoriteFriends() {
         const favoriteStore = useFavoriteStore();
         const { cachedFavorites } = favoriteStore;
-        state.localFavoriteFriends.clear();
+        localFavoriteFriends.value.clear();
         for (const ref of cachedFavorites.values()) {
             if (
                 !ref.$isDeleted &&
@@ -291,15 +251,15 @@ export const useFriendStore = defineStore('Friend', () => {
                     generalSettingsStore.localFavoriteFriendsGroups.length ===
                         0)
             ) {
-                state.localFavoriteFriends.add(ref.favoriteId);
+                localFavoriteFriends.value.add(ref.favoriteId);
             }
         }
         updateSidebarFriendsList();
     }
 
     function updateSidebarFriendsList() {
-        for (const ctx of state.friends.values()) {
+        for (const ctx of friends.value.values()) {
-            const isVIP = state.localFavoriteFriends.has(ctx.id);
+            const isVIP = localFavoriteFriends.value.has(ctx.id);
             if (ctx.isVIP === isVIP) {
                 continue;
             }
@@ -314,7 +274,7 @@ export const useFriendStore = defineStore('Friend', () => {
      * @param {string?} stateInput
      */
     function updateFriend(id, stateInput = undefined) {
-        const ctx = state.friends.get(id);
+        const ctx = friends.value.get(id);
         if (typeof ctx === 'undefined') {
             return;
         }
@@ -333,7 +293,7 @@ export const useFriendStore = defineStore('Friend', () => {
             ctx.pendingOffline = false;
             ctx.pendingOfflineTime = '';
         }
-        const isVIP = state.localFavoriteFriends.has(id);
+        const isVIP = localFavoriteFriends.value.has(id);
         let location = '';
         let $location_at = undefined;
         if (typeof ref !== 'undefined') {
@@ -478,11 +438,11 @@ export const useFriendStore = defineStore('Friend', () => {
                 );
             }
         }
-        if (!state.friends.has(id)) {
+        if (!friends.value.has(id)) {
             console.log('Friend not found', id);
             return;
         }
-        const isVIP = state.localFavoriteFriends.has(id);
+        const isVIP = localFavoriteFriends.value.has(id);
         const ref = ctx.ref;
         if (ctx.state !== newState && typeof ctx.ref !== 'undefined') {
             if (
@@ -554,11 +514,11 @@ export const useFriendStore = defineStore('Friend', () => {
      * @param {string} id
      */
     function deleteFriend(id) {
-        const ctx = state.friends.get(id);
+        const ctx = friends.value.get(id);
         if (typeof ctx === 'undefined') {
             return;
         }
-        state.friends.delete(id);
+        friends.value.delete(id);
     }
 
     /**
@@ -582,13 +542,13 @@ export const useFriendStore = defineStore('Friend', () => {
         }
         for (const friend of map) {
             const [id, state_input] = friend;
-            if (state.friends.has(id)) {
+            if (friends.value.has(id)) {
                 updateFriend(id, state_input);
             } else {
                 addFriend(id, state_input);
             }
         }
-        for (id of state.friends.keys()) {
+        for (id of friends.value.keys()) {
             if (map.has(id) === false) {
                 deleteFriend(id);
             }
@@ -600,11 +560,11 @@ export const useFriendStore = defineStore('Friend', () => {
      * @param {string?} state_input
      */
     function addFriend(id, state_input = undefined) {
-        if (state.friends.has(id)) {
+        if (friends.value.has(id)) {
             return;
         }
         const ref = userStore.cachedUsers.get(id);
-        const isVIP = state.localFavoriteFriends.has(id);
+        const isVIP = localFavoriteFriends.value.has(id);
         let name = '';
         const friend = friendLog.get(id);
         if (friend) {
@@ -642,7 +602,7 @@ export const useFriendStore = defineStore('Friend', () => {
         } else {
             ctx.name = ref.name;
         }
-        state.friends.set(id, ctx);
+        friends.value.set(id, ctx);
     }
 
     /**
@@ -650,7 +610,7 @@ export const useFriendStore = defineStore('Friend', () => {
      * @returns {Promise<*[]>}
      */
     async function refreshFriends() {
-        state.isRefreshFriendsLoading = true;
+        isRefreshFriendsLoading.value = true;
         try {
             const onlineFriends = await bulkRefreshFriends({
                 offline: false
@@ -664,10 +624,10 @@ export const useFriendStore = defineStore('Friend', () => {
                 friends = await refreshRemainingFriends(friends);
             }
 
-            state.isRefreshFriendsLoading = false;
+            isRefreshFriendsLoading.value = false;
             return friends;
         } catch (err) {
-            state.isRefreshFriendsLoading = false;
+            isRefreshFriendsLoading.value = false;
             throw err;
         }
     }
@@ -755,13 +715,13 @@ export const useFriendStore = defineStore('Friend', () => {
     }
 
     /**
-     * @param {Array} friends
+     * @param {Array} friendsArray
      * @returns {Promise<*>}
      */
-    async function refetchBrokenFriends(friends) {
+    async function refetchBrokenFriends(friendsArray) {
         // attempt to fix broken data from bulk friend fetch
-        for (let i = 0; i < friends.length; i++) {
+        for (let i = 0; i < friendsArray.length; i++) {
-            const friend = friends[i];
+            const friend = friendsArray[i];
             try {
                 // we don't update friend state here, it's not reliable
                 let state_input = 'offline';
@@ -770,7 +730,7 @@ export const useFriendStore = defineStore('Friend', () => {
                 } else if (friend.platform) {
                     state_input = 'online';
                 }
-                const ref = state.friends.get(friend.id);
+                const ref = friends.value.get(friend.id);
                 if (ref?.state !== state_input) {
                     if (AppDebug.debugFriendState) {
                         console.log(
@@ -781,7 +741,7 @@ export const useFriendStore = defineStore('Friend', () => {
                     const args = await userRequest.getUser({
                         userId: friend.id
                     });
-                    friends[i] = args.json;
+                    friendsArray[i] = args.json;
                 } else if (friend.location === 'traveling') {
                     if (AppDebug.debugFriendState) {
                         console.log(
@@ -792,13 +752,13 @@ export const useFriendStore = defineStore('Friend', () => {
                     const args = await userRequest.getUser({
                         userId: friend.id
                     });
-                    friends[i] = args.json;
+                    friendsArray[i] = args.json;
                 }
             } catch (err) {
                 console.error(err);
             }
         }
-        return friends;
+        return friendsArray;
     }
 
     /**
@@ -838,14 +798,14 @@ export const useFriendStore = defineStore('Friend', () => {
     }
 
     function updateOnlineFriendCoutner() {
-        const onlineFriendCount =
+        const onlineFriendCounts =
             vipFriends.value.length + onlineFriends.value.length;
-        if (onlineFriendCount !== state.onlineFriendCount) {
+        if (onlineFriendCounts !== onlineFriendCount.value) {
             AppApi.ExecuteVrFeedFunction(
                 'updateOnlineFriendCount',
-                `${onlineFriendCount}`
+                `${onlineFriendCounts}`
             );
-            state.onlineFriendCount = onlineFriendCount;
+            onlineFriendCount.value = onlineFriendCounts;
         }
     }
 
@@ -854,7 +814,7 @@ export const useFriendStore = defineStore('Friend', () => {
         let item;
         const userIds = [];
         const displayNames = [];
-        for (const ctx of state.friends.values()) {
+        for (const ctx of friends.value.values()) {
             userIds.push(ctx.id);
             if (ctx.ref?.displayName) {
                 displayNames.push(ctx.ref.displayName);
@@ -872,7 +832,7 @@ export const useFriendStore = defineStore('Friend', () => {
             }
         }
 
-        for (const ref of state.friends.values()) {
+        for (const ref of friends.value.values()) {
             if (ref?.ref?.id && ref.ref.displayName) {
                 friendsByDisplayName.set(ref.ref.displayName, ref.id);
             }
@@ -909,7 +869,7 @@ export const useFriendStore = defineStore('Friend', () => {
             friendListMap.set(item.userId, friend);
         }
         for (item of friendListMap.values()) {
-            ref = state.friends.get(item.userId);
+            ref = friends.value.get(item.userId);
             if (ref?.ref) {
                 ref.ref.$joinCount = item.joinCount;
                 ref.ref.$lastSeen = item.lastSeen;
@@ -948,7 +908,7 @@ export const useFriendStore = defineStore('Friend', () => {
                 handleFriendStatus(args);
                 if (args.json.isFriend && !friendLog.has(id)) {
                     if (state.friendNumber === 0) {
-                        state.friendNumber = state.friends.size;
+                        state.friendNumber = friends.value.size;
                     }
                     ref.$friendNumber = ++state.friendNumber;
                     configRepository.setInt(
@@ -963,7 +923,7 @@ export const useFriendStore = defineStore('Friend', () => {
                         displayName: ref.displayName,
                         friendNumber: ref.$friendNumber
                     };
-                    state.friendLogTable.data.push(friendLogHistory);
+                    friendLogTable.value.data.push(friendLogHistory);
                     database.addFriendLogHistory(friendLogHistory);
                     notificationStore.queueFriendLogNoty(friendLogHistory);
                     const friendLogCurrent = {
@@ -1037,7 +997,7 @@ export const useFriendStore = defineStore('Friend', () => {
                         userId: id,
                         displayName: ctx.displayName || id
                     };
-                    state.friendLogTable.data.push(friendLogHistory);
+                    friendLogTable.value.data.push(friendLogHistory);
                     database.addFriendLogHistory(friendLogHistory);
                     notificationStore.queueFriendLogNoty(friendLogHistory);
                     friendLog.delete(id);
@@ -1097,7 +1057,7 @@ export const useFriendStore = defineStore('Friend', () => {
                     previousDisplayName: ctx.displayName,
                     friendNumber: ref.$friendNumber
                 };
-                state.friendLogTable.data.push(friendLogHistoryDisplayName);
+                friendLogTable.value.data.push(friendLogHistoryDisplayName);
                 database.addFriendLogHistory(friendLogHistoryDisplayName);
                 notificationStore.queueFriendLogNoty(
                     friendLogHistoryDisplayName
@@ -1145,7 +1105,7 @@ export const useFriendStore = defineStore('Friend', () => {
                 previousTrustLevel: ctx.trustLevel,
                 friendNumber: ref.$friendNumber
             };
-            state.friendLogTable.data.push(friendLogHistoryTrustLevel);
+            friendLogTable.value.data.push(friendLogHistoryTrustLevel);
             database.addFriendLogHistory(friendLogHistoryTrustLevel);
             notificationStore.queueFriendLogNoty(friendLogHistoryTrustLevel);
             const friendLogCurrent2 = {
@@ -1195,10 +1155,10 @@ export const useFriendStore = defineStore('Friend', () => {
     async function migrateFriendLog(userId) {
         VRCXStorage.Remove(`${userId}_friendLogUpdatedAt`);
         VRCXStorage.Remove(`${userId}_friendLog`);
-        state.friendLogTable.data = await VRCXStorage.GetArray(
+        friendLogTable.value.data = await VRCXStorage.GetArray(
             `${userId}_friendLogTable`
         );
-        database.addFriendLogHistoryArray(state.friendLogTable.data);
+        database.addFriendLogHistoryArray(friendLogTable.value.data);
         VRCXStorage.Remove(`${userId}_friendLogTable`);
         await configRepository.setBool(`friendLogInit_${userId}`, true);
     }
@@ -1241,7 +1201,7 @@ export const useFriendStore = defineStore('Friend', () => {
     }
 
     async function initFriendLogHistoryTable() {
-        state.friendLogTable.data = await database.getFriendLogHistory();
+        friendLogTable.value.data = await database.getFriendLogHistory();
     }
 
     /**
@@ -1257,7 +1217,7 @@ export const useFriendStore = defineStore('Friend', () => {
         ref.friendNumber = friendNumber;
         friendLog.set(ref.userId, ref);
         database.setFriendLogCurrent(ref);
-        const friendRef = state.friends.get(userId);
+        const friendRef = friends.value.get(userId);
         if (friendRef?.ref) {
             friendRef.ref.$friendNumber = friendNumber;
         }
@@ -1285,7 +1245,7 @@ export const useFriendStore = defineStore('Friend', () => {
             setFriendNumber(state.friendNumber, userId);
         }
         if (state.friendNumber === 0) {
-            state.friendNumber = state.friends.size;
+            state.friendNumber = friends.value.size;
         }
         console.log('Applied friend order from API', state.friendNumber);
         await configRepository.setInt(
@@ -1398,7 +1358,7 @@ export const useFriendStore = defineStore('Friend', () => {
     }
 
     function applyFriendLogFriendOrderInReverse() {
-        state.friendNumber = state.friends.size + 1;
+        state.friendNumber = friends.value.size + 1;
         const friendLogTable = getFriendLogFriendOrder();
         for (let i = friendLogTable.length - 1; i > -1; i--) {
             const friendLogEntry = friendLogTable[i];
@@ -1412,23 +1372,23 @@ export const useFriendStore = defineStore('Friend', () => {
             ref.friendNumber = --state.friendNumber;
             friendLog.set(ref.userId, ref);
             database.setFriendLogCurrent(ref);
-            const friendRef = state.friends.get(friendLogEntry.id);
+            const friendRef = friends.value.get(friendLogEntry.id);
             if (friendRef?.ref) {
                 friendRef.ref.$friendNumber = ref.friendNumber;
             }
         }
-        state.friendNumber = state.friends.size;
+        state.friendNumber = friends.value.size;
         console.log('Applied friend order from friendLog');
     }
 
     function getFriendLogFriendOrder() {
-        const friendLogTable = [];
+        const result = [];
-        for (let i = 0; i < state.friendLogTable.data.length; i++) {
+        for (let i = 0; i < friendLogTable.value.data.length; i++) {
-            const ref = state.friendLogTable.data[i];
+            const ref = friendLogTable.value.data[i];
             if (ref.type !== 'Friend') {
                 continue;
             }
-            if (friendLogTable.findIndex((x) => x.id === ref.userId) !== -1) {
+            if (result.findIndex((x) => x.id === ref.userId) !== -1) {
                 // console.log(
                 //     'ignoring duplicate friend',
                 //     ref.displayName,
@@ -1436,14 +1396,14 @@ export const useFriendStore = defineStore('Friend', () => {
                 // );
                 continue;
             }
-            friendLogTable.push({
+            result.push({
                 id: ref.userId,
                 displayName: ref.displayName,
                 created_at: ref.created_at
             });
         }
-        friendLogTable.sort(compareByCreatedAtAscending);
+        result.sort(compareByCreatedAtAscending);
-        return friendLogTable;
+        return result;
     }
 
     function parseFriendOrderBackup(friendLogTable, created_at, backupUserIds) {
@@ -1451,7 +1411,7 @@ export const useFriendStore = defineStore('Friend', () => {
         const backupTable = [];
         for (i = 0; i < backupUserIds.length; i++) {
             const userId = backupUserIds[i];
-            const ctx = state.friends.get(userId);
+            const ctx = friends.value.get(userId);
             if (ctx) {
                 backupTable.push({
                     id: ctx.id,
@@ -1510,7 +1470,7 @@ export const useFriendStore = defineStore('Friend', () => {
     function applyFriendOrderBackup(userIdOrder) {
         for (let i = 0; i < userIdOrder.length; i++) {
             const userId = userIdOrder[i];
-            const ctx = state.friends.get(userId);
+            const ctx = friends.value.get(userId);
             const ref = ctx?.ref;
             if (!ref || ref.$friendNumber) {
                 continue;
@@ -1543,7 +1503,7 @@ export const useFriendStore = defineStore('Friend', () => {
             ref.friendNumber = ++state.friendNumber;
             friendLog.set(ref.userId, ref);
             database.setFriendLogCurrent(ref);
-            const friendRef = state.friends.get(friendLogEntry.id);
+            const friendRef = friends.value.get(friendLogEntry.id);
             if (friendRef?.ref) {
                 friendRef.ref.$friendNumber = ref.friendNumber;
             }
@@ -1567,7 +1527,7 @@ export const useFriendStore = defineStore('Friend', () => {
 
     async function initFriendsList() {
         const userId = userStore.currentUser.id;
-        state.isRefreshFriendsLoading = true;
+        isRefreshFriendsLoading.value = true;
         watchState.isFriendsLoaded = false;
         friendLog = new Map();
         initFriendLogHistoryTable();

src/stores/gallery.js

@@ -1,6 +1,6 @@
 import Noty from 'noty';
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import * as workerTimers from 'worker-timers';
 import {
     inventoryRequest,
@@ -24,173 +24,64 @@ export const useGalleryStore = defineStore('Gallery', () => {
     const { t } = useI18n();
 
     const state = reactive({
-        galleryTable: [],
-        // galleryDialog: {},
-        galleryDialogVisible: false,
-        galleryDialogGalleryLoading: false,
-        galleryDialogIconsLoading: false,
-        galleryDialogEmojisLoading: false,
-        galleryDialogStickersLoading: false,
-        galleryDialogPrintsLoading: false,
-        galleryDialogInventoryLoading: false,
-        uploadImage: '',
-        VRCPlusIconsTable: [],
-        printUploadNote: '',
-        printCropBorder: true,
         printCache: [],
         printQueue: [],
         printQueueWorker: null,
-        stickerTable: [],
-        instanceStickersCache: [],
-        printTable: [],
-        emojiTable: [],
-        inventoryTable: [],
-        fullscreenImageDialog: {
-            visible: false,
-            imageUrl: '',
-            fileName: ''
-        },
         instanceInventoryCache: [],
         instanceInventoryQueue: [],
         instanceInventoryQueueWorker: null
     });
 
-    const galleryTable = computed({
+    const galleryTable = ref([]);
-        get: () => state.galleryTable,
-        set: (value) => {
-            state.galleryTable = value;
-        }
-    });
 
-    const galleryDialogVisible = computed({
+    const galleryDialogVisible = ref(false);
-        get: () => state.galleryDialogVisible,
-        set: (value) => {
-            state.galleryDialogVisible = value;
-        }
-    });
 
-    const galleryDialogGalleryLoading = computed({
+    const galleryDialogGalleryLoading = ref(false);
-        get: () => state.galleryDialogGalleryLoading,
-        set: (value) => {
-            state.galleryDialogGalleryLoading = value;
-        }
-    });
 
-    const galleryDialogIconsLoading = computed({
+    const galleryDialogIconsLoading = ref(false);
-        get: () => state.galleryDialogIconsLoading,
-        set: (value) => {
-            state.galleryDialogIconsLoading = value;
-        }
-    });
 
-    const galleryDialogEmojisLoading = computed({
+    const galleryDialogEmojisLoading = ref(false);
-        get: () => state.galleryDialogEmojisLoading,
-        set: (value) => {
-            state.galleryDialogEmojisLoading = value;
-        }
-    });
 
-    const galleryDialogStickersLoading = computed({
+    const galleryDialogStickersLoading = ref(false);
-        get: () => state.galleryDialogStickersLoading,
-        set: (value) => {
-            state.galleryDialogStickersLoading = value;
-        }
-    });
 
-    const galleryDialogPrintsLoading = computed({
+    const galleryDialogPrintsLoading = ref(false);
-        get: () => state.galleryDialogPrintsLoading,
-        set: (value) => {
-            state.galleryDialogPrintsLoading = value;
-        }
-    });
 
-    const galleryDialogInventoryLoading = computed({
+    const galleryDialogInventoryLoading = ref(false);
-        get: () => state.galleryDialogInventoryLoading,
-        set: (value) => {
-            state.galleryDialogInventoryLoading = value;
-        }
-    });
 
-    const uploadImage = computed({
+    const uploadImage = ref('');
-        get: () => state.uploadImage,
-        set: (value) => {
-            state.uploadImage = value;
-        }
-    });
 
-    const VRCPlusIconsTable = computed({
+    const VRCPlusIconsTable = ref([]);
-        get: () => state.VRCPlusIconsTable,
-        set: (value) => {
-            state.VRCPlusIconsTable = value;
-        }
-    });
 
-    const printUploadNote = computed({
+    const printUploadNote = ref('');
-        get: () => state.printUploadNote,
-        set: (value) => {
-            state.printUploadNote = value;
-        }
-    });
 
-    const printCropBorder = computed({
+    const printCropBorder = ref(true);
-        get: () => state.printCropBorder,
-        set: (value) => {
-            state.printCropBorder = value;
-        }
-    });
 
-    const stickerTable = computed({
+    const stickerTable = ref([]);
-        get: () => state.stickerTable,
-        set: (value) => {
-            state.stickerTable = value;
-        }
-    });
 
-    const instanceStickersCache = computed({
+    const instanceStickersCache = ref([]);
-        get: () => state.instanceStickersCache,
-        set: (value) => {
-            state.instanceStickersCache = value;
-        }
-    });
 
-    const printTable = computed({
+    const printTable = ref([]);
-        get: () => state.printTable,
-        set: (value) => {
-            state.printTable = value;
-        }
-    });
 
-    const emojiTable = computed({
+    const emojiTable = ref([]);
-        get: () => state.emojiTable,
-        set: (value) => {
-            state.emojiTable = value;
-        }
-    });
 
-    const inventoryTable = computed({
+    const inventoryTable = ref([]);
-        get: () => state.inventoryTable,
-        set: (value) => {
-            state.inventoryTable = value;
-        }
-    });
 
-    const fullscreenImageDialog = computed({
+    const fullscreenImageDialog = ref({
-        get: () => state.fullscreenImageDialog,
+        visible: false,
-        set: (value) => {
+        imageUrl: '',
-            state.fullscreenImageDialog = value;
+        fileName: ''
-        }
     });
 
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
-            state.galleryTable = [];
+            galleryTable.value = [];
-            state.VRCPlusIconsTable = [];
+            VRCPlusIconsTable.value = [];
-            state.stickerTable = [];
+            stickerTable.value = [];
-            state.printTable = [];
+            printTable.value = [];
-            state.emojiTable = [];
+            emojiTable.value = [];
-            state.galleryDialogVisible = false;
+            galleryDialogVisible.value = false;
-            state.fullscreenImageDialog.visible = false;
+            fullscreenImageDialog.value.visible = false;
             if (isLoggedIn) {
                 tryDeleteOldPrints();
             }
@@ -200,29 +91,29 @@ export const useGalleryStore = defineStore('Gallery', () => {
 
     function handleFilesList(args) {
         if (args.params.tag === 'gallery') {
-            state.galleryTable = args.json.reverse();
+            galleryTable.value = args.json.reverse();
         }
         if (args.params.tag === 'icon') {
-            state.VRCPlusIconsTable = args.json.reverse();
+            VRCPlusIconsTable.value = args.json.reverse();
         }
         if (args.params.tag === 'sticker') {
-            state.stickerTable = args.json.reverse();
+            stickerTable.value = args.json.reverse();
-            state.galleryDialogStickersLoading = false;
+            galleryDialogStickersLoading.value = false;
         }
         if (args.params.tag === 'emoji') {
-            state.emojiTable = args.json.reverse();
+            emojiTable.value = args.json.reverse();
-            state.galleryDialogEmojisLoading = false;
+            galleryDialogEmojisLoading.value = false;
         }
     }
 
     function handleGalleryImageAdd(args) {
-        if (Object.keys(state.galleryTable).length !== 0) {
+        if (Object.keys(galleryTable.value).length !== 0) {
-            state.galleryTable.unshift(args.json);
+            galleryTable.value.unshift(args.json);
         }
     }
 
     function showGalleryDialog() {
-        state.galleryDialogVisible = true;
+        galleryDialogVisible.value = true;
         refreshGalleryTable();
         refreshVRCPlusIconsTable();
         refreshEmojiTable();
@@ -232,7 +123,7 @@ export const useGalleryStore = defineStore('Gallery', () => {
     }
 
     function refreshGalleryTable() {
-        state.galleryDialogGalleryLoading = true;
+        galleryDialogGalleryLoading.value = true;
         const params = {
             n: 100,
             tag: 'gallery'
@@ -244,12 +135,12 @@ export const useGalleryStore = defineStore('Gallery', () => {
                 console.error('Error fetching gallery files:', error);
             })
             .finally(() => {
-                state.galleryDialogGalleryLoading = false;
+                galleryDialogGalleryLoading.value = false;
             });
     }
 
     function refreshVRCPlusIconsTable() {
-        state.galleryDialogIconsLoading = true;
+        galleryDialogIconsLoading.value = true;
         const params = {
             n: 100,
             tag: 'icon'
@@ -261,7 +152,7 @@ export const useGalleryStore = defineStore('Gallery', () => {
                 console.error('Error fetching VRC Plus icons:', error);
             })
             .finally(() => {
-                state.galleryDialogIconsLoading = false;
+                galleryDialogIconsLoading.value = false;
             });
     }
 
@@ -277,7 +168,7 @@ export const useGalleryStore = defineStore('Gallery', () => {
         }
         const r = new FileReader();
         r.onload = function () {
-            state.uploadImage = btoa(r.result);
+            uploadImage.value = btoa(r.result);
         };
         r.readAsBinaryString(file);
     }
@@ -287,11 +178,11 @@ export const useGalleryStore = defineStore('Gallery', () => {
             '.inviteImageUploadButton'
         );
         buttonList.forEach((button) => (button.value = ''));
-        state.uploadImage = '';
+        uploadImage.value = '';
     }
 
     function refreshStickerTable() {
-        state.galleryDialogStickersLoading = true;
+        galleryDialogStickersLoading.value = true;
         const params = {
             n: 100,
             tag: 'sticker'
@@ -303,23 +194,23 @@ export const useGalleryStore = defineStore('Gallery', () => {
                 console.error('Error fetching stickers:', error);
             })
             .finally(() => {
-                state.galleryDialogStickersLoading = false;
+                galleryDialogStickersLoading.value = false;
             });
     }
 
     function handleStickerAdd(args) {
-        if (Object.keys(state.stickerTable).length !== 0) {
+        if (Object.keys(stickerTable.value).length !== 0) {
-            state.stickerTable.unshift(args.json);
+            stickerTable.value.unshift(args.json);
         }
     }
 
     async function trySaveStickerToFile(displayName, userId, inventoryId) {
-        if (state.instanceStickersCache.includes(inventoryId)) {
+        if (instanceStickersCache.value.includes(inventoryId)) {
             return;
         }
-        state.instanceStickersCache.push(inventoryId);
+        instanceStickersCache.value.push(inventoryId);
-        if (state.instanceStickersCache.size > 100) {
+        if (instanceStickersCache.value.size > 100) {
-            state.instanceStickersCache.shift();
+            instanceStickersCache.value.shift();
         }
         const args = await inventoryRequest.getUserInventoryItem({
             inventoryId,
@@ -353,7 +244,7 @@ export const useGalleryStore = defineStore('Gallery', () => {
     }
 
     async function refreshPrintTable() {
-        state.galleryDialogPrintsLoading = true;
+        galleryDialogPrintsLoading.value = true;
         const params = {
             n: 100
         };
@@ -362,11 +253,11 @@ export const useGalleryStore = defineStore('Gallery', () => {
             args.json.sort((a, b) => {
                 return new Date(b.timestamp) - new Date(a.timestamp);
             });
-            state.printTable = args.json;
+            printTable.value = args.json;
         } catch (error) {
             console.error('Error fetching prints:', error);
         } finally {
-            state.galleryDialogPrintsLoading = false;
+            galleryDialogPrintsLoading.value = false;
         }
     }
 
@@ -437,7 +328,7 @@ export const useGalleryStore = defineStore('Gallery', () => {
     // #region | Emoji
 
     function refreshEmojiTable() {
-        state.galleryDialogEmojisLoading = true;
+        galleryDialogEmojisLoading.value = true;
         const params = {
             n: 100,
             tag: 'emoji'
@@ -449,19 +340,19 @@ export const useGalleryStore = defineStore('Gallery', () => {
                 console.error('Error fetching emojis:', error);
             })
             .finally(() => {
-                state.galleryDialogEmojisLoading = false;
+                galleryDialogEmojisLoading.value = false;
             });
     }
 
     async function getInventory() {
-        state.inventoryTable = [];
+        inventoryTable.value = [];
         advancedSettingsStore.currentUserInventory.clear();
         const params = {
             n: 100,
             offset: 0,
             order: 'newest'
         };
-        state.galleryDialogInventoryLoading = true;
+        galleryDialogInventoryLoading.value = true;
         try {
             for (let i = 0; i < 100; i++) {
                 params.offset = i * params.n;
@@ -472,7 +363,7 @@ export const useGalleryStore = defineStore('Gallery', () => {
                         item
                     );
                     if (!item.flags.includes('ugc')) {
-                        state.inventoryTable.push(item);
+                        inventoryTable.value.push(item);
                     }
                 }
                 if (args.json.data.length === 0) {
@@ -482,7 +373,7 @@ export const useGalleryStore = defineStore('Gallery', () => {
         } catch (error) {
             console.error('Error fetching inventory items:', error);
         } finally {
-            state.galleryDialogInventoryLoading = false;
+            galleryDialogInventoryLoading.value = false;
         }
     }
 
@@ -492,7 +383,7 @@ export const useGalleryStore = defineStore('Gallery', () => {
         }
         await refreshPrintTable();
         const printLimit = 64 - 2; // 2 reserved for new prints
-        const printCount = state.printTable.length;
+        const printCount = printTable.value.length;
         if (printCount <= printLimit) {
             return;
         }
@@ -502,7 +393,7 @@ export const useGalleryStore = defineStore('Gallery', () => {
         }
         const idList = [];
         for (let i = 0; i < deleteCount; i++) {
-            const print = state.printTable[printCount - 1 - i];
+            const print = printTable.value[printCount - 1 - i];
             idList.push(print.id);
         }
         console.log(`Deleting ${deleteCount} old prints`, idList);
@@ -528,7 +419,7 @@ export const useGalleryStore = defineStore('Gallery', () => {
         if (!imageUrl) {
             return;
         }
-        const D = state.fullscreenImageDialog;
+        const D = fullscreenImageDialog.value;
         D.imageUrl = imageUrl;
         D.fileName = fileName;
         D.visible = true;
@@ -537,7 +428,7 @@ export const useGalleryStore = defineStore('Gallery', () => {
     function queueCheckInstanceInventory(inventoryId, userId) {
         if (
             state.instanceInventoryCache.includes(inventoryId) ||
-            state.instanceStickersCache.includes(inventoryId)
+            instanceStickersCache.value.includes(inventoryId)
         ) {
             return;
         }

src/stores/game.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive } from 'vue';
+import { reactive, ref } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import * as workerTimers from 'worker-timers';
 import configRepository from '../service/config.js';
@@ -34,71 +34,29 @@ export const useGameStore = defineStore('Game', () => {
     const updateLoopStore = useUpdateLoopStore();
 
     const state = reactive({
-        lastCrashedTime: null,
+        lastCrashedTime: null
-        VRChatUsedCacheSize: '',
-        VRChatTotalCacheSize: 0,
-        VRChatCacheSizeLoading: false,
-        isGameRunning: false,
-        isGameNoVR: true,
-        isSteamVRRunning: false,
-        isHmdAfk: false
     });
 
+    const VRChatUsedCacheSize = ref('');
+
+    const VRChatTotalCacheSize = ref(0);
+
+    const VRChatCacheSizeLoading = ref(false);
+
+    const isGameRunning = ref(false);
+
+    const isGameNoVR = ref(true);
+
+    const isSteamVRRunning = ref(false);
+
+    const isHmdAfk = ref(false);
+
     async function init() {
-        state.isGameNoVR = await configRepository.getBool('isGameNoVR');
+        isGameNoVR.value = await configRepository.getBool('isGameNoVR');
     }
 
     init();
 
-    const VRChatUsedCacheSize = computed({
-        get: () => state.VRChatUsedCacheSize,
-        set: (value) => {
-            state.VRChatUsedCacheSize = value;
-        }
-    });
-
-    const VRChatTotalCacheSize = computed({
-        get: () => state.VRChatTotalCacheSize,
-        set: (value) => {
-            state.VRChatTotalCacheSize = value;
-        }
-    });
-
-    const VRChatCacheSizeLoading = computed({
-        get: () => state.VRChatCacheSizeLoading,
-        set: (value) => {
-            state.VRChatCacheSizeLoading = value;
-        }
-    });
-
-    const isGameRunning = computed({
-        get: () => state.isGameRunning,
-        set: (value) => {
-            state.isGameRunning = value;
-        }
-    });
-
-    const isGameNoVR = computed({
-        get: () => state.isGameNoVR,
-        set: (value) => {
-            state.isGameNoVR = value;
-        }
-    });
-
-    const isSteamVRRunning = computed({
-        get: () => state.isSteamVRRunning,
-        set: (value) => {
-            state.isSteamVRRunning = value;
-        }
-    });
-
-    const isHmdAfk = computed({
-        get: () => state.isHmdAfk,
-        set: (value) => {
-            state.isHmdAfk = value;
-        }
-    });
-
     async function deleteVRChatCache(ref) {
         await _deleteVRChatCache(ref);
         getVRChatCacheSize();
@@ -140,7 +98,7 @@ export const useGameStore = defineStore('Game', () => {
             state.lastCrashedTime = new Date();
             // wait a bit for SteamVR to potentially close before deciding to relaunch
             let restartDelay = 8000;
-            if (state.isGameNoVR) {
+            if (isGameNoVR.value) {
                 // wait for game to close before relaunching
                 restartDelay = 2000;
             }
@@ -152,7 +110,7 @@ export const useGameStore = defineStore('Game', () => {
     }
 
     function restartCrashedGame(location) {
-        if (!state.isGameNoVR && !state.isSteamVRRunning) {
+        if (!isGameNoVR.value && !isSteamVRRunning.value) {
             console.log("SteamVR isn't running, not relaunching VRChat");
             return;
         }
@@ -170,36 +128,36 @@ export const useGameStore = defineStore('Game', () => {
         database.addGamelogEventToDatabase(entry);
         notificationStore.queueGameLogNoty(entry);
         gameLogStore.addGameLog(entry);
-        launchStore.launchGame(location, '', state.isGameNoVR);
+        launchStore.launchGame(location, '', isGameNoVR.value);
     }
 
     async function getVRChatCacheSize() {
-        state.VRChatCacheSizeLoading = true;
+        VRChatCacheSizeLoading.value = true;
         const totalCacheSize = 30;
-        state.VRChatTotalCacheSize = totalCacheSize;
+        VRChatTotalCacheSize.value = totalCacheSize;
         const usedCacheSize = await AssetBundleManager.GetCacheSize();
-        state.VRChatUsedCacheSize = (usedCacheSize / 1073741824).toFixed(2);
+        VRChatUsedCacheSize.value = (usedCacheSize / 1073741824).toFixed(2);
-        state.VRChatCacheSizeLoading = false;
+        VRChatCacheSizeLoading.value = false;
     }
 
     // use in C#
     async function updateIsGameRunning(
-        isGameRunning,
+        isGameRunningArg,
-        isSteamVRRunning,
+        isSteamVRRunningArg,
-        isHmdAfk
+        isHmdAfkArg
     ) {
         const avatarStore = useAvatarStore();
         if (advancedSettingsStore.gameLogDisabled) {
             return;
         }
-        if (isGameRunning !== state.isGameRunning) {
+        if (isGameRunningArg !== isGameRunning.value) {
-            state.isGameRunning = isGameRunning;
+            isGameRunning.value = isGameRunningArg;
-            if (isGameRunning) {
+            if (isGameRunningArg) {
                 userStore.currentUser.$online_for = Date.now();
                 userStore.currentUser.$offline_for = '';
                 userStore.currentUser.$previousAvatarSwapTime = Date.now();
             } else {
-                await configRepository.setBool('isGameNoVR', state.isGameNoVR);
+                await configRepository.setBool('isGameNoVR', isGameNoVR.value);
                 userStore.currentUser.$online_for = 0;
                 userStore.currentUser.$offline_for = Date.now();
                 instanceStore.removeAllQueuedInstances();
@@ -216,16 +174,16 @@ export const useGameStore = defineStore('Game', () => {
             vrStore.updateVRLastLocation();
             workerTimers.setTimeout(() => checkVRChatDebugLogging(), 60000);
             updateLoopStore.nextDiscordUpdate = 0;
-            console.log(new Date(), 'isGameRunning', isGameRunning);
+            console.log(new Date(), 'isGameRunning', isGameRunningArg);
         }
 
-        if (isSteamVRRunning !== state.isSteamVRRunning) {
+        if (isSteamVRRunningArg !== isSteamVRRunning.value) {
-            state.isSteamVRRunning = isSteamVRRunning;
+            isSteamVRRunning.value = isSteamVRRunningArg;
-            console.log('isSteamVRRunning:', isSteamVRRunning);
+            console.log('isSteamVRRunning:', isSteamVRRunningArg);
         }
-        if (isHmdAfk !== state.isHmdAfk) {
+        if (isHmdAfkArg !== isHmdAfk.value) {
-            state.isHmdAfk = isHmdAfk;
+            isHmdAfk.value = isHmdAfkArg;
-            console.log('isHmdAfk:', isHmdAfk);
+            console.log('isHmdAfk:', isHmdAfkArg);
         }
         vrStore.updateOpenVR();
     }

src/stores/gameLog.js

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { reactive, watch, ref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import * as workerTimers from 'worker-timers';
 import { userRequest } from '../api';
@@ -49,20 +49,12 @@ export const useGameLogStore = defineStore('GameLog', () => {
     const galleryStore = useGalleryStore();
     const photonStore = usePhotonStore();
     const sharedFeedStore = useSharedFeedStore();
+
     const state = reactive({
-        nowPlaying: {
+        lastLocationAvatarList: new Map()
-            url: '',
+    });
-            name: '',
+
-            length: 0,
+    const gameLogTable = ref({
-            startTime: 0,
-            offset: 0,
-            elapsed: 0,
-            percentage: 0,
-            remainingText: '',
-            playing: false,
-            thumbnailUrl: ''
-        },
-        gameLogTable: {
         data: [],
         loading: false,
         search: '',
@@ -82,65 +74,32 @@ export const useGameLogStore = defineStore('GameLog', () => {
             pageSizes: [10, 15, 20, 25, 50, 100]
         },
         vip: false
-        },
-        gameLogSessionTable: [],
-        lastVideoUrl: '',
-        lastResourceloadUrl: '',
-        lastLocationAvatarList: new Map()
     });
 
-    async function init() {
+    const gameLogSessionTable = ref([]);
-        state.gameLogTable.filter = JSON.parse(
-            await configRepository.getString('VRCX_gameLogTableFilters', '[]')
-        );
-        state.gameLogTable.vip = await configRepository.getBool(
-            'VRCX_gameLogTableVIPFilter',
-            false
-        );
-    }
 
-    init();
+    const nowPlaying = ref({
-
+        url: '',
-    const gameLogTable = computed({
+        name: '',
-        get: () => state.gameLogTable,
+        length: 0,
-        set: (value) => {
+        startTime: 0,
-            state.gameLogTable = value;
+        offset: 0,
-        }
+        elapsed: 0,
+        percentage: 0,
+        remainingText: '',
+        playing: false,
+        thumbnailUrl: ''
     });
 
-    const gameLogSessionTable = computed({
+    const lastVideoUrl = ref('');
-        get: () => state.gameLogSessionTable,
-        set: (value) => {
-            state.gameLogSessionTable = value;
-        }
-    });
 
-    const nowPlaying = computed({
+    const lastResourceloadUrl = ref('');
-        get: () => state.nowPlaying,
-        set: (value) => {
-            state.nowPlaying = value;
-        }
-    });
-
-    const lastVideoUrl = computed({
-        get: () => state.lastVideoUrl,
-        set: (value) => {
-            state.lastVideoUrl = value;
-        }
-    });
-
-    const lastResourceloadUrl = computed({
-        get: () => state.lastResourceloadUrl,
-        set: (value) => {
-            state.lastResourceloadUrl = value;
-        }
-    });
 
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
-            state.gameLogTable.data = [];
+            gameLogTable.value.data = [];
-            state.gameLogSessionTable = [];
+            gameLogSessionTable.value = [];
             if (isLoggedIn) {
                 initGameLogTable();
             }
@@ -151,7 +110,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
     watch(
         () => watchState.isFavoritesLoaded,
         (isFavoritesLoaded) => {
-            if (isFavoritesLoaded && state.gameLogTable.vip) {
+            if (isFavoritesLoaded && gameLogTable.value.vip) {
                 gameLogTableLookup(); // re-apply VIP filter after friends are loaded
             }
         }
@@ -167,8 +126,20 @@ export const useGameLogStore = defineStore('GameLog', () => {
         { flush: 'sync' }
     );
 
+    async function init() {
+        gameLogTable.value.filter = JSON.parse(
+            await configRepository.getString('VRCX_gameLogTableFilters', '[]')
+        );
+        gameLogTable.value.vip = await configRepository.getBool(
+            'VRCX_gameLogTableVIPFilter',
+            false
+        );
+    }
+
+    init();
+
     function clearNowPlaying() {
-        state.nowPlaying = {
+        nowPlaying.value = {
             url: '',
             name: '',
             length: 0,
@@ -184,7 +155,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
     }
 
     function setNowPlaying(ctx) {
-        if (state.nowPlaying.url !== ctx.videoUrl) {
+        if (nowPlaying.value.url !== ctx.videoUrl) {
             if (!ctx.userId && ctx.displayName) {
                 for (const ref of userStore.cachedUsers.values()) {
                     if (ref.displayName === ctx.displayName) {
@@ -202,7 +173,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
                 displayName = ` (${ctx.displayName})`;
             }
             const name = `${ctx.videoName}${displayName}`;
-            state.nowPlaying = {
+            nowPlaying.value = {
                 url: ctx.videoUrl,
                 name,
                 length: ctx.videoLength,
@@ -215,8 +186,8 @@ export const useGameLogStore = defineStore('GameLog', () => {
                 thumbnailUrl: ctx.thumbnailUrl
             };
         } else {
-            state.nowPlaying = {
+            nowPlaying.value = {
-                ...state.nowPlaying,
+                ...nowPlaying.value,
                 length: ctx.videoLength,
                 offset: ctx.videoPos,
                 elapsed: 0,
@@ -225,23 +196,23 @@ export const useGameLogStore = defineStore('GameLog', () => {
                 thumbnailUrl: ctx.thumbnailUrl
             };
             if (ctx.updatedAt && ctx.videoPos) {
-                state.nowPlaying.startTime =
+                nowPlaying.value.startTime =
                     Date.parse(ctx.updatedAt) / 1000 - ctx.videoPos;
             } else {
-                state.nowPlaying.startTime =
+                nowPlaying.value.startTime =
                     Date.parse(ctx.created_at) / 1000 - ctx.videoPos;
             }
         }
         vrStore.updateVrNowPlaying();
-        if (!state.nowPlaying.playing && ctx.videoLength > 0) {
+        if (!nowPlaying.value.playing && ctx.videoLength > 0) {
-            state.nowPlaying.playing = true;
+            nowPlaying.value.playing = true;
             updateNowPlaying();
         }
     }
 
     function updateNowPlaying() {
-        const np = state.nowPlaying;
+        const np = nowPlaying.value;
-        if (!state.nowPlaying.playing) {
+        if (!nowPlaying.value.playing) {
             return;
         }
 
@@ -264,7 +235,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
         console.log('Loading player list from game log...');
         let ctx;
         let i;
-        const data = state.gameLogSessionTable;
+        const data = gameLogSessionTable.value;
         if (data.length === 0) {
             return;
         }
@@ -362,27 +333,27 @@ export const useGameLogStore = defineStore('GameLog', () => {
     async function gameLogTableLookup() {
         await configRepository.setString(
             'VRCX_gameLogTableFilters',
-            JSON.stringify(state.gameLogTable.filter)
+            JSON.stringify(gameLogTable.value.filter)
         );
         await configRepository.setBool(
             'VRCX_gameLogTableVIPFilter',
-            state.gameLogTable.vip
+            gameLogTable.value.vip
         );
-        state.gameLogTable.loading = true;
+        gameLogTable.value.loading = true;
         let vipList = [];
-        if (state.gameLogTable.vip) {
+        if (gameLogTable.value.vip) {
             vipList = Array.from(friendStore.localFavoriteFriends.values());
         }
-        state.gameLogTable.data = await database.lookupGameLogDatabase(
+        gameLogTable.value.data = await database.lookupGameLogDatabase(
-            state.gameLogTable.search,
+            gameLogTable.value.search,
-            state.gameLogTable.filter,
+            gameLogTable.value.filter,
             vipList
         );
-        state.gameLogTable.loading = false;
+        gameLogTable.value.loading = false;
     }
 
     function addGameLog(entry) {
-        state.gameLogSessionTable.push(entry);
+        gameLogSessionTable.value.push(entry);
         sharedFeedStore.updateSharedFeed(false);
         if (entry.type === 'VideoPlay') {
             // event time can be before last gameLog entry
@@ -391,7 +362,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
 
         // If the VIP friend filter is enabled, logs from other friends will be ignored.
         if (
-            state.gameLogTable.vip &&
+            gameLogTable.value.vip &&
             !friendStore.localFavoriteFriends.has(entry.userId) &&
             (entry.type === 'OnPlayerJoined' ||
                 entry.type === 'OnPlayerLeft' ||
@@ -412,15 +383,15 @@ export const useGameLogStore = defineStore('GameLog', () => {
             return;
         }
         if (
-            state.gameLogTable.filter.length > 0 &&
+            gameLogTable.value.filter.length > 0 &&
-            !state.gameLogTable.filter.includes(entry.type)
+            !gameLogTable.value.filter.includes(entry.type)
         ) {
             return;
         }
         if (!gameLogSearch(entry)) {
             return;
         }
-        state.gameLogTable.data.push(entry);
+        gameLogTable.value.data.push(entry);
         sweepGameLog();
         uiStore.notifyMenu('gameLog');
     }
@@ -435,7 +406,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
     }
 
     function gameLogSearch(row) {
-        const value = state.gameLogTable.search.toUpperCase();
+        const value = gameLogTable.value.search.toUpperCase();
         if (!value) {
             return true;
         }
@@ -504,7 +475,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
     }
 
     function sweepGameLog() {
-        const { data } = state.gameLogTable;
+        const { data } = gameLogTable.value;
         const j = data.length;
         if (j > vrcxStore.maxTableSize) {
             data.splice(0, j - vrcxStore.maxTableSize);
@@ -514,14 +485,14 @@ export const useGameLogStore = defineStore('GameLog', () => {
         date.setDate(date.getDate() - 1); // 24 hour limit
         const limit = date.toJSON();
         let i = 0;
-        const k = state.gameLogSessionTable.length;
+        const k = gameLogSessionTable.value.length;
-        while (i < k && state.gameLogSessionTable[i].created_at < limit) {
+        while (i < k && gameLogSessionTable.value[i].created_at < limit) {
             ++i;
         }
         if (i === k) {
-            state.gameLogSessionTable = [];
+            gameLogSessionTable.value = [];
         } else if (i) {
-            state.gameLogSessionTable.splice(0, i);
+            gameLogSessionTable.value.splice(0, i);
         }
     }
 
@@ -668,6 +639,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
                             'Sort by Last Seen'
                         )
                     ) {
+                        // TODO: remove
                         friendStore.sortVIPFriends = true;
                         friendStore.sortOnlineFriends = true;
                     }
@@ -706,27 +678,27 @@ export const useGameLogStore = defineStore('GameLog', () => {
                 break;
             case 'video-play':
                 gameLog.videoUrl = decodeURI(gameLog.videoUrl);
-                if (state.lastVideoUrl === gameLog.videoUrl) {
+                if (lastVideoUrl.value === gameLog.videoUrl) {
                     break;
                 }
-                state.lastVideoUrl = gameLog.videoUrl;
+                lastVideoUrl.value = gameLog.videoUrl;
                 addGameLogVideo(gameLog, location, userId);
                 break;
             case 'video-sync':
                 const timestamp = gameLog.timestamp.replace(/,/g, '');
-                if (state.nowPlaying.playing) {
+                if (nowPlaying.value.playing) {
-                    state.nowPlaying.offset = parseInt(timestamp, 10);
+                    nowPlaying.value.offset = parseInt(timestamp, 10);
                 }
                 break;
             case 'resource-load-string':
             case 'resource-load-image':
                 if (
                     !generalSettingsStore.logResourceLoad ||
-                    state.lastResourceloadUrl === gameLog.resourceUrl
+                    lastResourceloadUrl.value === gameLog.resourceUrl
                 ) {
                     break;
                 }
-                state.lastResourceloadUrl = gameLog.resourceUrl;
+                lastResourceloadUrl.value = gameLog.resourceUrl;
                 entry = {
                     created_at: gameLog.dt,
                     type:
@@ -1073,7 +1045,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
         if (displayName === 'Random') {
             displayName = '';
         }
-        if (videoUrl === state.nowPlaying.url) {
+        if (videoUrl === nowPlaying.value.url) {
             const entry = {
                 updatedAt: gameLog.dt,
                 videoUrl,
@@ -1144,7 +1116,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
             // ummm okay
             videoPos = 0;
         }
-        if (videoUrl === state.nowPlaying.url) {
+        if (videoUrl === nowPlaying.value.url) {
             const entry = {
                 updatedAt: gameLog.dt,
                 videoUrl,
@@ -1210,7 +1182,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
         if (videoId === '9999') {
             videoId = 'YouTube';
         }
-        if (videoUrl === state.nowPlaying.url) {
+        if (videoUrl === nowPlaying.value.url) {
             const entry = {
                 updatedAt: gameLog.dt,
                 videoUrl,
@@ -1270,7 +1242,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
         const videoName = replaceBioSymbols(data[4]);
         const videoUrl = videoName;
         const videoId = 'LSMedia';
-        if (videoUrl === state.nowPlaying.url) {
+        if (videoUrl === nowPlaying.value.url) {
             const entry = {
                 updatedAt: gameLog.dt,
                 videoUrl,
@@ -1329,7 +1301,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
             clearNowPlaying();
             return;
         }
-        if (videoUrl === state.nowPlaying.url) {
+        if (videoUrl === nowPlaying.value.url) {
             const entry = {
                 updatedAt: gameLog.dt,
                 videoUrl,
@@ -1367,7 +1339,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
 
     async function getGameLogTable() {
         await database.initTables();
-        state.gameLogSessionTable = await database.getGamelogDatabase();
+        gameLogSessionTable.value = await database.getGamelogDatabase();
         const dateTill = await database.getLastDateGameLogDatabase();
         updateGameLog(dateTill);
     }
@@ -1430,9 +1402,9 @@ export const useGameLogStore = defineStore('GameLog', () => {
     }
 
     async function initGameLogTable() {
-        state.gameLogTable.data = await database.lookupGameLogDatabase(
+        gameLogTable.value.data = await database.lookupGameLogDatabase(
-            state.gameLogTable.search,
+            gameLogTable.value.search,
-            state.gameLogTable.filter
+            gameLogTable.value.filter
         );
     }
 

src/stores/group.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch, nextTick } from 'vue';
+import { watch, nextTick, ref } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import * as workerTimers from 'worker-timers';
 import {
@@ -28,8 +28,9 @@ export const useGroupStore = defineStore('Group', () => {
     const userStore = useUserStore();
     const notificationStore = useNotificationStore();
 
-    const state = reactive({
+    let cachedGroups = new Map();
-        groupDialog: {
+
+    const groupDialog = ref({
         visible: false,
         loading: false,
         isGetGroupDialogGroupLoading: false,
@@ -57,9 +58,11 @@ export const useGroupStore = defineStore('Group', () => {
         },
         postsSearch: '',
         galleries: {}
-        },
+    });
-        currentUserGroups: new Map(),
+
-        inviteGroupDialog: {
+    const currentUserGroups = ref(new Map());
+
+    const inviteGroupDialog = ref({
         visible: false,
         loading: false,
         groupId: '',
@@ -71,95 +74,41 @@ export const useGroupStore = defineStore('Group', () => {
             displayName: '',
             $userColour: ''
         }
-        },
+    });
-        moderateGroupDialog: {
+
+    const moderateGroupDialog = ref({
         visible: false,
         groupId: '',
         groupName: '',
         userId: '',
         userObject: {}
-        },
+    });
-        groupMemberModeration: {
+
+    const groupMemberModeration = ref({
         visible: false,
         loading: false,
         id: '',
         groupRef: {},
         auditLogTypes: [],
         openWithUserId: ''
-        },
-        inGameGroupOrder: [],
-        groupInstances: [],
-        currentUserGroupsInit: false
     });
 
-    let cachedGroups = new Map();
+    const inGameGroupOrder = ref([]);
 
-    const groupDialog = computed({
+    const groupInstances = ref([]);
-        get: () => state.groupDialog,
-        set: (value) => {
-            state.groupDialog = value;
-        }
-    });
 
-    const currentUserGroups = computed({
+    const currentUserGroupsInit = ref(false);
-        get: () => state.currentUserGroups,
-        set: (value) => {
-            state.currentUserGroups = value;
-        }
-    });
-
-    const inviteGroupDialog = computed({
-        get: () => state.inviteGroupDialog,
-        set: (value) => {
-            state.inviteGroupDialog = value;
-        }
-    });
-
-    const moderateGroupDialog = computed({
-        get: () => state.moderateGroupDialog,
-        set: (value) => {
-            state.moderateGroupDialog = value;
-        }
-    });
-
-    const groupMemberModeration = computed({
-        get: () => state.groupMemberModeration,
-        set: (value) => {
-            state.groupMemberModeration = value;
-        }
-    });
-
-    const inGameGroupOrder = computed({
-        get: () => state.inGameGroupOrder,
-        set: (value) => {
-            state.inGameGroupOrder = value;
-        }
-    });
-
-    const groupInstances = computed({
-        get: () => state.groupInstances,
-        set: (value) => {
-            state.groupInstances = value;
-        }
-    });
-
-    const currentUserGroupsInit = computed({
-        get: () => state.currentUserGroupsInit,
-        set: (value) => {
-            state.currentUserGroupsInit = value;
-        }
-    });
 
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
-            state.groupDialog.visible = false;
+            groupDialog.value.visible = false;
-            state.inviteGroupDialog.visible = false;
+            inviteGroupDialog.value.visible = false;
-            state.moderateGroupDialog.visible = false;
+            moderateGroupDialog.value.visible = false;
-            state.groupMemberModeration.visible = false;
+            groupMemberModeration.value.visible = false;
-            state.currentUserGroupsInit = false;
+            currentUserGroupsInit.value = false;
             cachedGroups.clear();
-            state.currentUserGroups.clear();
+            currentUserGroups.value.clear();
             if (isLoggedIn) {
                 initUserGroups();
             }
@@ -171,7 +120,7 @@ export const useGroupStore = defineStore('Group', () => {
         if (!groupId) {
             return;
         }
-        const D = state.groupDialog;
+        const D = groupDialog.value;
         D.visible = true;
         D.loading = true;
         D.id = groupId;
@@ -251,7 +200,7 @@ export const useGroupStore = defineStore('Group', () => {
     }
 
     function groupChange(ref, message) {
-        if (!state.currentUserGroupsInit) {
+        if (!currentUserGroupsInit.value) {
             return;
         }
         // oh the level of cursed for compibility
@@ -279,11 +228,11 @@ export const useGroupStore = defineStore('Group', () => {
     }
 
     function saveCurrentUserGroups() {
-        if (!state.currentUserGroupsInit) {
+        if (!currentUserGroupsInit.value) {
             return;
         }
         const groups = [];
-        for (const ref of state.currentUserGroups.values()) {
+        for (const ref of currentUserGroups.value.values()) {
             groups.push({
                 id: ref.id,
                 name: ref.name,
@@ -340,7 +289,7 @@ export const useGroupStore = defineStore('Group', () => {
      * @param {object} ref
      */
     function applyPresenceGroups(ref) {
-        if (!state.currentUserGroupsInit) {
+        if (!currentUserGroupsInit.value) {
             // wait for init before diffing
             return;
         }
@@ -356,11 +305,11 @@ export const useGroupStore = defineStore('Group', () => {
 
         // update group list
         for (const groupId of groups) {
-            if (!state.currentUserGroups.has(groupId)) {
+            if (!currentUserGroups.value.has(groupId)) {
                 onGroupJoined(groupId);
             }
         }
-        for (const groupId of state.currentUserGroups.keys()) {
+        for (const groupId of currentUserGroups.value.keys()) {
             if (!groups.includes(groupId)) {
                 onGroupLeft(groupId);
             }
@@ -372,8 +321,8 @@ export const useGroupStore = defineStore('Group', () => {
      * @param {string} groupId
      */
     function onGroupJoined(groupId) {
-        if (!state.currentUserGroups.has(groupId)) {
+        if (!currentUserGroups.value.has(groupId)) {
-            state.currentUserGroups.set(groupId, {
+            currentUserGroups.value.set(groupId, {
                 id: groupId,
                 name: '',
                 iconUrl: ''
@@ -393,11 +342,11 @@ export const useGroupStore = defineStore('Group', () => {
      * @param {string} groupId
      */
     function onGroupLeft(groupId) {
-        if (state.groupDialog.visible && state.groupDialog.id === groupId) {
+        if (groupDialog.value.visible && groupDialog.value.id === groupId) {
             showGroupDialog(groupId);
         }
-        if (state.currentUserGroups.has(groupId)) {
+        if (currentUserGroups.value.has(groupId)) {
-            state.currentUserGroups.delete(groupId);
+            currentUserGroups.value.delete(groupId);
             groupRequest.getCachedGroup({ groupId }).then((args) => {
                 groupChange(args.ref, 'Left group');
             });
@@ -428,7 +377,7 @@ export const useGroupStore = defineStore('Group', () => {
             posts,
             params
         };
-        const D = state.groupDialog;
+        const D = groupDialog.value;
         if (D.id === args.params.groupId) {
             for (const post of args.json.posts) {
                 post.title = replaceBioSymbols(post.title);
@@ -445,7 +394,7 @@ export const useGroupStore = defineStore('Group', () => {
     }
 
     function getGroupDialogGroup(groupId) {
-        const D = state.groupDialog;
+        const D = groupDialog.value;
         D.isGetGroupDialogGroupLoading = false;
         return groupRequest
             .getGroup({ groupId, includeRoles: true })
@@ -476,7 +425,7 @@ export const useGroupStore = defineStore('Group', () => {
                             groupId
                         })
                         .then((args) => {
-                            if (state.groupDialog.id === args.params.groupId) {
+                            if (groupDialog.value.id === args.params.groupId) {
                                 instanceStore.applyGroupDialogInstances(
                                     args.json.instances
                                 );
@@ -504,7 +453,7 @@ export const useGroupStore = defineStore('Group', () => {
     }
 
     async function updateInGameGroupOrder() {
-        state.inGameGroupOrder = [];
+        inGameGroupOrder.value = [];
         try {
             const json = await gameStore.getVRChatRegistryKey(
                 `VRC_GROUP_ORDER_${userStore.currentUser.id}`
@@ -512,15 +461,15 @@ export const useGroupStore = defineStore('Group', () => {
             if (!json) {
                 return;
             }
-            state.inGameGroupOrder = JSON.parse(json);
+            inGameGroupOrder.value = JSON.parse(json);
         } catch (err) {
             console.error(err);
         }
     }
 
     function sortGroupInstancesByInGame(a, b) {
-        const aIndex = state.inGameGroupOrder.indexOf(a?.group?.id);
+        const aIndex = inGameGroupOrder.value.indexOf(a?.group?.id);
-        const bIndex = state.inGameGroupOrder.indexOf(b?.group?.id);
+        const bIndex = inGameGroupOrder.value.indexOf(b?.group?.id);
         if (aIndex === -1 && bIndex === -1) {
             return 0;
         }
@@ -541,10 +490,10 @@ export const useGroupStore = defineStore('Group', () => {
             .then((args) => {
                 const groupId = args.params.groupId;
                 if (
-                    state.groupDialog.visible &&
+                    groupDialog.value.visible &&
-                    state.groupDialog.id === groupId
+                    groupDialog.value.id === groupId
                 ) {
-                    state.groupDialog.inGroup = false;
+                    groupDialog.value.inGroup = false;
                     getGroupDialogGroup(groupId);
                 }
                 if (
@@ -574,7 +523,7 @@ export const useGroupStore = defineStore('Group', () => {
     }
 
     function updateGroupPostSearch() {
-        const D = state.groupDialog;
+        const D = groupDialog.value;
         const search = D.postsSearch.toLowerCase();
         D.postsFiltered = D.posts.filter((post) => {
             if (search === '') {
@@ -681,7 +630,7 @@ export const useGroupStore = defineStore('Group', () => {
             };
             cachedGroups.set(ref.id, ref);
         } else {
-            if (state.currentUserGroups.has(ref.id)) {
+            if (currentUserGroups.value.has(ref.id)) {
                 // compare group props
                 if (
                     ref.ownerId &&
@@ -743,12 +692,12 @@ export const useGroupStore = defineStore('Group', () => {
         ref.$url = `https://vrc.group/${ref.shortCode}.${ref.discriminator}`;
         applyGroupLanguage(ref);
 
-        const currentUserGroupRef = state.currentUserGroups.get(ref.id);
+        const currentUserGroupRef = currentUserGroups.value.get(ref.id);
         if (currentUserGroupRef) {
-            state.currentUserGroups.set(ref.id, ref);
+            currentUserGroups.value.set(ref.id, ref);
         }
 
-        const D = state.groupDialog;
+        const D = groupDialog.value;
         if (D.visible && D.id === ref.id) {
             D.inGroup = ref.membershipStatus === 'member';
             D.ref = ref;
@@ -793,11 +742,11 @@ export const useGroupStore = defineStore('Group', () => {
             json.$memberId = json.id;
             json.id = json.groupId;
             if (
-                state.groupDialog.visible &&
+                groupDialog.value.visible &&
-                state.groupDialog.id === json.groupId
+                groupDialog.value.id === json.groupId
             ) {
-                state.groupDialog.ref.myMember.visibility = json.visibility;
+                groupDialog.value.ref.myMember.visibility = json.visibility;
-                state.groupDialog.ref.myMember.isSubscribedToAnnouncements =
+                groupDialog.value.ref.myMember.isSubscribedToAnnouncements =
                     json.isSubscribedToAnnouncements;
             }
             if (
@@ -814,17 +763,17 @@ export const useGroupStore = defineStore('Group', () => {
             });
         }
         let member;
-        if (state.groupDialog.id === args.json.groupId) {
+        if (groupDialog.value.id === args.json.groupId) {
             let i;
-            for (i = 0; i < state.groupDialog.members.length; ++i) {
+            for (i = 0; i < groupDialog.value.members.length; ++i) {
-                member = state.groupDialog.members[i];
+                member = groupDialog.value.members[i];
                 if (member.userId === args.json.userId) {
                     Object.assign(member, applyGroupMember(args.json));
                     break;
                 }
             }
-            for (i = 0; i < state.groupDialog.memberSearchResults.length; ++i) {
+            for (i = 0; i < groupDialog.value.memberSearchResults.length; ++i) {
-                member = state.groupDialog.memberSearchResults[i];
+                member = groupDialog.value.memberSearchResults[i];
                 if (member.userId === args.json.userId) {
                     Object.assign(member, applyGroupMember(args.json));
                     break;
@@ -851,7 +800,7 @@ export const useGroupStore = defineStore('Group', () => {
      * @param {object} args
      */
     function handleGroupPost(args) {
-        const D = state.groupDialog;
+        const D = groupDialog.value;
         if (D.id !== args.params.groupId) {
             return;
         }
@@ -884,7 +833,7 @@ export const useGroupStore = defineStore('Group', () => {
     }
 
     async function handleGroupUserInstances(args) {
-        state.groupInstances = [];
+        groupInstances.value = [];
         for (const json of args.json.instances) {
             if (args.json.fetchedAt) {
                 // tack on fetchedAt
@@ -901,7 +850,7 @@ export const useGroupStore = defineStore('Group', () => {
                 }
                 return;
             }
-            state.groupInstances.push({
+            groupInstances.value.push({
                 group: groupRef,
                 instance: instanceRef
             });
@@ -976,7 +925,7 @@ export const useGroupStore = defineStore('Group', () => {
             )
         );
         cachedGroups.clear();
-        state.currentUserGroups.clear();
+        currentUserGroups.value.clear();
         for (const group of savedGroups) {
             const json = {
                 id: group.id,
@@ -989,7 +938,7 @@ export const useGroupStore = defineStore('Group', () => {
                 }
             };
             const ref = applyGroup(json);
-            state.currentUserGroups.set(group.id, ref);
+            currentUserGroups.value.set(group.id, ref);
         }
 
         if (groups) {
@@ -1010,7 +959,7 @@ export const useGroupStore = defineStore('Group', () => {
                         includeRoles: true
                     });
                     const ref = applyGroup(args.json);
-                    state.currentUserGroups.set(groupId, ref);
+                    currentUserGroups.value.set(groupId, ref);
                 } catch (err) {
                     console.error(err);
                 }
@@ -1019,7 +968,7 @@ export const useGroupStore = defineStore('Group', () => {
             await Promise.allSettled(promises);
         }
 
-        state.currentUserGroupsInit = true;
+        currentUserGroupsInit.value = true;
         getCurrentUserGroups();
     }
 
@@ -1028,11 +977,11 @@ export const useGroupStore = defineStore('Group', () => {
             userId: userStore.currentUser.id
         });
         handleGroupList(args);
-        state.currentUserGroups.clear();
+        currentUserGroups.value.clear();
         for (const group of args.json) {
             const ref = applyGroup(group);
-            if (!state.currentUserGroups.has(group.id)) {
+            if (!currentUserGroups.value.has(group.id)) {
-                state.currentUserGroups.set(group.id, ref);
+                currentUserGroups.value.set(group.id, ref);
             }
         }
         const args1 = await groupRequest.getGroupPermissions({
@@ -1062,14 +1011,14 @@ export const useGroupStore = defineStore('Group', () => {
     }
 
     function showModerateGroupDialog(userId) {
-        const D = state.moderateGroupDialog;
+        const D = moderateGroupDialog.value;
         D.userId = userId;
         D.userObject = {};
         D.visible = true;
     }
 
     function showGroupMemberModerationDialog(groupId, userId = '') {
-        const D = state.groupMemberModeration;
+        const D = groupMemberModeration.value;
         D.id = groupId;
         D.openWithUserId = userId;
 
@@ -1090,8 +1039,6 @@ export const useGroupStore = defineStore('Group', () => {
     }
 
     return {
-        state,
-
         groupDialog,
         currentUserGroups,
         inviteGroupDialog,

src/stores/instance.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch, ref } from 'vue';
+import { reactive, watch, ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import { instanceRequest, userRequest, worldRequest } from '../api';
 import configRepository from '../service/config';
@@ -47,7 +47,15 @@ export const useInstanceStore = defineStore('Instance', () => {
     const { t } = useI18n();
 
     const state = reactive({
-        currentInstanceWorld: {
+        updatePlayerListTimer: null,
+        updatePlayerListPending: false
+    });
+
+    let cachedInstances = new Map();
+
+    const lastInstanceApplied = ref('');
+
+    const currentInstanceWorld = ref({
         ref: {},
         instance: {},
         isPC: false,
@@ -59,13 +67,19 @@ export const useInstanceStore = defineStore('Instance', () => {
         cacheSize: '',
         bundleSizes: [],
         lastUpdated: ''
-        },
+    });
-        currentInstanceLocation: {},
+
-        queuedInstances: new Map(),
+    const currentInstanceLocation = ref({});
-        previousInstancesInfoDialogVisible: false,
+
-        previousInstancesInfoDialogInstanceId: '',
+    const queuedInstances = ref(new Map());
-        instanceJoinHistory: new Map(),
+
-        currentInstanceUserList: {
+    const previousInstancesInfoDialogVisible = ref(false);
+
+    const previousInstancesInfoDialogInstanceId = ref('');
+
+    const instanceJoinHistory = ref(new Map());
+
+    const currentInstanceUserList = ref({
         data: [],
         tableProps: {
             stripe: true,
@@ -76,72 +90,16 @@ export const useInstanceStore = defineStore('Instance', () => {
             }
         },
         layout: 'table'
-        },
-        updatePlayerListTimer: null,
-        updatePlayerListPending: false
-    });
-
-    let cachedInstances = new Map();
-
-    const lastInstanceApplied = ref('');
-
-    const currentInstanceWorld = computed({
-        get: () => state.currentInstanceWorld,
-        set: (value) => {
-            state.currentInstanceWorld = value;
-        }
-    });
-
-    const currentInstanceLocation = computed({
-        get: () => state.currentInstanceLocation,
-        set: (value) => {
-            state.currentInstanceLocation = value;
-        }
-    });
-
-    const queuedInstances = computed({
-        get: () => state.queuedInstances,
-        set: (value) => {
-            state.queuedInstances = value;
-        }
-    });
-
-    const previousInstancesInfoDialogVisible = computed({
-        get: () => state.previousInstancesInfoDialogVisible,
-        set: (value) => {
-            state.previousInstancesInfoDialogVisible = value;
-        }
-    });
-
-    const previousInstancesInfoDialogInstanceId = computed({
-        get: () => state.previousInstancesInfoDialogInstanceId,
-        set: (value) => {
-            state.previousInstancesInfoDialogInstanceId = value;
-        }
-    });
-
-    const instanceJoinHistory = computed({
-        get: () => state.instanceJoinHistory,
-        set: (value) => {
-            state.instanceJoinHistory = value;
-        }
-    });
-
-    const currentInstanceUserList = computed({
-        get: () => state.currentInstanceUserList,
-        set: (value) => {
-            state.currentInstanceUserList = value;
-        }
     });
 
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
-            state.currentInstanceUserList.data = [];
+            currentInstanceUserList.value.data = [];
-            state.instanceJoinHistory = new Map();
+            instanceJoinHistory.value = new Map();
-            state.previousInstancesInfoDialogVisible = false;
+            previousInstancesInfoDialogVisible.value = false;
             cachedInstances.clear();
-            state.queuedInstances.clear();
+            queuedInstances.value.clear();
             if (isLoggedIn) {
                 getInstanceJoinHistory();
             }
@@ -150,7 +108,7 @@ export const useInstanceStore = defineStore('Instance', () => {
     );
 
     async function getInstanceJoinHistory() {
-        state.instanceJoinHistory = await database.getInstanceJoinHistory();
+        instanceJoinHistory.value = await database.getInstanceJoinHistory();
     }
 
     function addInstanceJoinHistory(location, dateTime) {
@@ -158,17 +116,17 @@ export const useInstanceStore = defineStore('Instance', () => {
             return;
         }
 
-        if (state.instanceJoinHistory.has(location)) {
+        if (instanceJoinHistory.value.has(location)) {
-            state.instanceJoinHistory.delete(location);
+            instanceJoinHistory.value.delete(location);
         }
 
         const epoch = new Date(dateTime).getTime();
-        state.instanceJoinHistory.set(location, epoch);
+        instanceJoinHistory.value.set(location, epoch);
     }
 
     function showPreviousInstancesInfoDialog(instanceId) {
-        state.previousInstancesInfoDialogVisible = true;
+        previousInstancesInfoDialogVisible.value = true;
-        state.previousInstancesInfoDialogInstanceId = instanceId;
+        previousInstancesInfoDialogInstanceId.value = instanceId;
     }
 
     function updateCurrentInstanceWorld() {
@@ -178,7 +136,7 @@ export const useInstanceStore = defineStore('Instance', () => {
             instanceId = locationStore.lastLocationDestination;
         }
         if (!instanceId) {
-            state.currentInstanceWorld = {
+            currentInstanceWorld.value = {
                 ref: {},
                 instance: {},
                 isPC: false,
@@ -191,9 +149,9 @@ export const useInstanceStore = defineStore('Instance', () => {
                 bundleSizes: [],
                 lastUpdated: ''
             };
-            state.currentInstanceLocation = {};
+            currentInstanceLocation.value = {};
-        } else if (instanceId !== state.currentInstanceLocation.tag) {
+        } else if (instanceId !== currentInstanceLocation.value.tag) {
-            state.currentInstanceWorld = {
+            currentInstanceWorld.value = {
                 ref: {},
                 instance: {},
                 isPC: false,
@@ -207,30 +165,30 @@ export const useInstanceStore = defineStore('Instance', () => {
                 lastUpdated: ''
             };
             L = parseLocation(instanceId);
-            state.currentInstanceLocation = L;
+            currentInstanceLocation.value = L;
             worldRequest
                 .getWorld({
                     worldId: L.worldId
                 })
                 .then((args) => {
-                    state.currentInstanceWorld.ref = args.ref;
+                    currentInstanceWorld.value.ref = args.ref;
                     const { isPC, isQuest, isIos } = getAvailablePlatforms(
                         args.ref.unityPackages
                     );
-                    state.currentInstanceWorld.isPC = isPC;
+                    currentInstanceWorld.value.isPC = isPC;
-                    state.currentInstanceWorld.isQuest = isQuest;
+                    currentInstanceWorld.value.isQuest = isQuest;
-                    state.currentInstanceWorld.isIos = isIos;
+                    currentInstanceWorld.value.isIos = isIos;
-                    state.currentInstanceWorld.avatarScalingDisabled =
+                    currentInstanceWorld.value.avatarScalingDisabled =
                         args.ref?.tags.includes(
                             'feature_avatar_scaling_disabled'
                         );
-                    state.currentInstanceWorld.focusViewDisabled =
+                    currentInstanceWorld.value.focusViewDisabled =
                         args.ref?.tags.includes('feature_focus_view_disabled');
                     checkVRChatCache(args.ref)
                         .then((cacheInfo) => {
                             if (cacheInfo.Item1 > 0) {
-                                state.currentInstanceWorld.inCache = true;
+                                currentInstanceWorld.value.inCache = true;
-                                state.currentInstanceWorld.cacheSize = `${(
+                                currentInstanceWorld.value.cacheSize = `${(
                                     cacheInfo.Item1 / 1048576
                                 ).toFixed(2)} MB`;
                             }
@@ -243,7 +201,7 @@ export const useInstanceStore = defineStore('Instance', () => {
                         });
                     getBundleDateSize(args.ref)
                         .then((bundleSizes) => {
-                            state.currentInstanceWorld.bundleSizes =
+                            currentInstanceWorld.value.bundleSizes =
                                 bundleSizes;
                         })
                         .catch((error) => {
@@ -260,20 +218,20 @@ export const useInstanceStore = defineStore('Instance', () => {
         } else {
             worldRequest
                 .getCachedWorld({
-                    worldId: state.currentInstanceLocation.worldId
+                    worldId: currentInstanceLocation.value.worldId
                 })
                 .then((args) => {
-                    state.currentInstanceWorld.ref = args.ref;
+                    currentInstanceWorld.value.ref = args.ref;
                     const { isPC, isQuest, isIos } = getAvailablePlatforms(
                         args.ref.unityPackages
                     );
-                    state.currentInstanceWorld.isPC = isPC;
+                    currentInstanceWorld.value.isPC = isPC;
-                    state.currentInstanceWorld.isQuest = isQuest;
+                    currentInstanceWorld.value.isQuest = isQuest;
-                    state.currentInstanceWorld.isIos = isIos;
+                    currentInstanceWorld.value.isIos = isIos;
                     checkVRChatCache(args.ref).then((cacheInfo) => {
                         if (cacheInfo.Item1 > 0) {
-                            state.currentInstanceWorld.inCache = true;
+                            currentInstanceWorld.value.inCache = true;
-                            state.currentInstanceWorld.cacheSize = `${(
+                            currentInstanceWorld.value.cacheSize = `${(
                                 cacheInfo.Item1 / 1048576
                             ).toFixed(2)} MB`;
                         }
@@ -283,7 +241,7 @@ export const useInstanceStore = defineStore('Instance', () => {
         if (isRealInstance(instanceId)) {
             const ref = cachedInstances.get(instanceId);
             if (typeof ref !== 'undefined') {
-                state.currentInstanceWorld.instance = ref;
+                currentInstanceWorld.value.instance = ref;
             } else {
                 L = parseLocation(instanceId);
                 if (L.isRealInstance) {
@@ -293,7 +251,7 @@ export const useInstanceStore = defineStore('Instance', () => {
                             instanceId: L.instanceId
                         })
                         .then((args) => {
-                            state.currentInstanceWorld.instance = args.ref;
+                            currentInstanceWorld.value.instance = args.ref;
                         })
                         .catch((error) => {
                             console.error(
@@ -914,14 +872,14 @@ export const useInstanceStore = defineStore('Instance', () => {
     }
 
     function removeAllQueuedInstances() {
-        state.queuedInstances.forEach((ref) => {
+        queuedInstances.value.forEach((ref) => {
             ElMessage({
                 message: `Removed instance ${ref.$worldName} from queue`,
                 type: 'info'
             });
             ref.$msgBox?.close();
         });
-        state.queuedInstances.clear();
+        queuedInstances.value.clear();
     }
 
     /**
@@ -929,10 +887,10 @@ export const useInstanceStore = defineStore('Instance', () => {
      * @param {string} instanceId
      */
     function removeQueuedInstance(instanceId) {
-        const ref = state.queuedInstances.get(instanceId);
+        const ref = queuedInstances.value.get(instanceId);
         if (typeof ref !== 'undefined') {
             ref.$msgBox.close();
-            state.queuedInstances.delete(instanceId);
+            queuedInstances.value.delete(instanceId);
         }
     }
 
@@ -941,7 +899,7 @@ export const useInstanceStore = defineStore('Instance', () => {
      * @param {string} instanceId
      */
     function applyQueuedInstance(instanceId) {
-        state.queuedInstances.forEach((ref) => {
+        queuedInstances.value.forEach((ref) => {
             if (ref.location !== instanceId) {
                 ElMessage({
                     message: t('message.instance.removed_form_queue', {
@@ -950,13 +908,13 @@ export const useInstanceStore = defineStore('Instance', () => {
                     type: 'info'
                 });
                 ref.$msgBox?.close();
-                state.queuedInstances.delete(ref.location);
+                queuedInstances.value.delete(ref.location);
             }
         });
         if (!instanceId) {
             return;
         }
-        if (!state.queuedInstances.has(instanceId)) {
+        if (!queuedInstances.value.has(instanceId)) {
             const L = parseLocation(instanceId);
             if (L.isRealInstance) {
                 instanceRequest
@@ -989,10 +947,10 @@ export const useInstanceStore = defineStore('Instance', () => {
      * @param {string} instanceId
      */
     function instanceQueueReady(instanceId) {
-        const ref = state.queuedInstances.get(instanceId);
+        const ref = queuedInstances.value.get(instanceId);
         if (typeof ref !== 'undefined') {
             ref.$msgBox.close();
-            state.queuedInstances.delete(instanceId);
+            queuedInstances.value.delete(instanceId);
         }
         const L = parseLocation(instanceId);
         const group = groupStore.cachedGroups.get(L.groupId);
@@ -1033,7 +991,7 @@ export const useInstanceStore = defineStore('Instance', () => {
      * @returns {Promise<void>}
      */
     async function instanceQueueUpdate(instanceId, position, queueSize) {
-        let ref = state.queuedInstances.get(instanceId);
+        let ref = queuedInstances.value.get(instanceId);
         if (typeof ref === 'undefined') {
             ref = {
                 $msgBox: null,
@@ -1069,7 +1027,7 @@ export const useInstanceStore = defineStore('Instance', () => {
             ref.$groupName
         );
         ref.$msgBox.message = `You are in position ${ref.position} of ${ref.queueSize} in the queue for ${location} `;
-        state.queuedInstances.set(instanceId, ref);
+        queuedInstances.value.set(instanceId, ref);
         // workerTimers.setTimeout(this.instanceQueueTimeout, 3600000);
     }
 
@@ -1224,14 +1182,14 @@ export const useInstanceStore = defineStore('Instance', () => {
                 }
             }
         }
-        state.currentInstanceUserList.data = users;
+        currentInstanceUserList.value.data = users;
     }
 
     // $app.methods.instanceQueueClear = function () {
     //     // remove all instances from queue
-    //     state.queuedInstances.forEach((ref) => {
+    //     queuedInstances.value.forEach((ref) => {
     //         ref.$msgBox.close();
-    //         state.queuedInstances.delete(ref.location);
+    //         queuedInstances.value.delete(ref.location);
     //     });
     // };
 

src/stores/invite.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import { instanceRequest, inviteMessagesRequest } from '../api';
 import { watchState } from '../service/watchState';
@@ -14,14 +14,15 @@ export const useInviteStore = defineStore('Invite', () => {
     const gameStore = useGameStore();
     const launchStore = useLaunchStore();
     const advancedSettingsStore = useAdvancedSettingsStore();
-    const state = reactive({
+
-        editInviteMessageDialog: {
+    const editInviteMessageDialog = ref({
         visible: false,
         inviteMessage: {},
         messageType: '',
         newMessage: ''
-        },
+    });
-        inviteMessageTable: {
+
+    const inviteMessageTable = ref({
         data: [],
         tableProps: {
             stripe: true,
@@ -29,8 +30,9 @@ export const useInviteStore = defineStore('Invite', () => {
         },
         layout: 'table',
         visible: false
-        },
+    });
-        inviteResponseMessageTable: {
+
+    const inviteResponseMessageTable = ref({
         data: [],
         tableProps: {
             stripe: true,
@@ -38,8 +40,9 @@ export const useInviteStore = defineStore('Invite', () => {
         },
         layout: 'table',
         visible: false
-        },
+    });
-        inviteRequestMessageTable: {
+
+    const inviteRequestMessageTable = ref({
         data: [],
         tableProps: {
             stripe: true,
@@ -47,8 +50,9 @@ export const useInviteStore = defineStore('Invite', () => {
         },
         layout: 'table',
         visible: false
-        },
+    });
-        inviteRequestResponseMessageTable: {
+
+    const inviteRequestResponseMessageTable = ref({
         data: [],
         tableProps: {
             stripe: true,
@@ -56,67 +60,31 @@ export const useInviteStore = defineStore('Invite', () => {
         },
         layout: 'table',
         visible: false
-        }
     });
 
     watch(
         () => watchState.isLoggedIn,
         () => {
-            state.inviteMessageTable.data = [];
+            inviteMessageTable.value.data = [];
-            state.inviteResponseMessageTable.data = [];
+            inviteResponseMessageTable.value.data = [];
-            state.inviteRequestMessageTable.data = [];
+            inviteRequestMessageTable.value.data = [];
-            state.inviteRequestResponseMessageTable.data = [];
+            inviteRequestResponseMessageTable.value.data = [];
-            state.editInviteMessageDialog.visible = false;
+            editInviteMessageDialog.value.visible = false;
-            state.inviteMessageTable.visible = false;
+            inviteMessageTable.value.visible = false;
-            state.inviteResponseMessageTable.visible = false;
+            inviteResponseMessageTable.value.visible = false;
-            state.inviteRequestMessageTable.visible = false;
+            inviteRequestMessageTable.value.visible = false;
-            state.inviteRequestResponseMessageTable.visible = false;
+            inviteRequestResponseMessageTable.value.visible = false;
         },
         { flush: 'sync' }
     );
 
-    const editInviteMessageDialog = computed({
-        get: () => state.editInviteMessageDialog,
-        set: (value) => {
-            state.editInviteMessageDialog = value;
-        }
-    });
-
-    const inviteMessageTable = computed({
-        get: () => state.inviteMessageTable,
-        set: (value) => {
-            state.inviteMessageTable = value;
-        }
-    });
-
-    const inviteResponseMessageTable = computed({
-        get: () => state.inviteResponseMessageTable,
-        set: (value) => {
-            state.inviteResponseMessageTable = value;
-        }
-    });
-
-    const inviteRequestMessageTable = computed({
-        get: () => state.inviteRequestMessageTable,
-        set: (value) => {
-            state.inviteRequestMessageTable = value;
-        }
-    });
-
-    const inviteRequestResponseMessageTable = computed({
-        get: () => state.inviteRequestResponseMessageTable,
-        set: (value) => {
-            state.inviteRequestResponseMessageTable = value;
-        }
-    });
-
     /**
      *
      * @param {string} messageType
      * @param {any} inviteMessage
      */
     function showEditInviteMessageDialog(messageType, inviteMessage) {
-        const D = state.editInviteMessageDialog;
+        const D = editInviteMessageDialog.value;
         D.newMessage = inviteMessage.message;
         D.visible = true;
         D.inviteMessage = inviteMessage;
@@ -133,16 +101,16 @@ export const useInviteStore = defineStore('Invite', () => {
             .then(({ json }) => {
                 switch (mode) {
                     case 'message':
-                        state.inviteMessageTable.data = json;
+                        inviteMessageTable.value.data = json;
                         break;
                     case 'response':
-                        state.inviteResponseMessageTable.data = json;
+                        inviteResponseMessageTable.value.data = json;
                         break;
                     case 'request':
-                        state.inviteRequestMessageTable.data = json;
+                        inviteRequestMessageTable.value.data = json;
                         break;
                     case 'requestResponse':
-                        state.inviteRequestResponseMessageTable.data = json;
+                        inviteRequestResponseMessageTable.value.data = json;
                         break;
                 }
             })
@@ -196,8 +164,6 @@ export const useInviteStore = defineStore('Invite', () => {
     }
 
     return {
-        state,
-
         editInviteMessageDialog,
         inviteMessageTable,
         inviteResponseMessageTable,

src/stores/launch.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch, nextTick } from 'vue';
+import { ref, watch, nextTick } from 'vue';
 import { ElMessage } from 'element-plus';
 import { instanceRequest } from '../api';
 import configRepository from '../service/config';
@@ -7,48 +7,25 @@ import { watchState } from '../service/watchState';
 import { parseLocation } from '../shared/utils';
 
 export const useLaunchStore = defineStore('Launch', () => {
-    const state = reactive({
+    const isLaunchOptionsDialogVisible = ref(false);
-        isLaunchOptionsDialogVisible: false,
+    const isOpeningInstance = ref(false);
-        isOpeningInstance: false,
+    const launchDialogData = ref({
-        launchDialogData: {
         visible: false,
         loading: false,
         tag: '',
         shortName: ''
-        }
-    });
-
-    const isLaunchOptionsDialogVisible = computed({
-        get: () => state.isLaunchOptionsDialogVisible,
-        set: (value) => {
-            state.isLaunchOptionsDialogVisible = value;
-        }
-    });
-
-    const isOpeningInstance = computed({
-        get: () => state.isOpeningInstance,
-        set: (value) => {
-            state.isOpeningInstance = value;
-        }
-    });
-
-    const launchDialogData = computed({
-        get: () => state.launchDialogData,
-        set: (value) => {
-            state.launchDialogData = value;
-        }
     });
 
     watch(
         () => watchState.isLoggedIn,
         () => {
-            state.isLaunchOptionsDialogVisible = false;
+            isLaunchOptionsDialogVisible.value = false;
         },
         { flush: 'sync' }
     );
 
     function showLaunchOptions() {
-        state.isLaunchOptionsDialogVisible = true;
+        isLaunchOptionsDialogVisible.value = true;
     }
 
     /**
@@ -58,14 +35,14 @@ export const useLaunchStore = defineStore('Launch', () => {
      * @returns {Promise<void>}
      */
     async function showLaunchDialog(tag, shortName = null) {
-        state.launchDialogData = {
+        launchDialogData.value = {
             visible: true,
             // flag, use for trigger adjustDialogZ
             loading: true,
             tag,
             shortName
         };
-        nextTick(() => (state.launchDialogData.loading = false));
+        nextTick(() => (launchDialogData.value.loading = false));
     }
 
     /**
@@ -110,10 +87,10 @@ export const useLaunchStore = defineStore('Launch', () => {
      * @returns {Promise<void>}
      */
     async function tryOpenInstanceInVrc(location, shortName) {
-        if (state.isOpeningInstance) {
+        if (isOpeningInstance.value) {
             return;
         }
-        state.isOpeningInstance = true;
+        isOpeningInstance.value = true;
         let launchUrl = '';
         let result = false;
         try {
@@ -146,7 +123,7 @@ export const useLaunchStore = defineStore('Launch', () => {
             }
         }
         setTimeout(() => {
-            state.isOpeningInstance = false;
+            isOpeningInstance.value = false;
         }, 1000);
     }
 
@@ -209,8 +186,6 @@ export const useLaunchStore = defineStore('Launch', () => {
     }
 
     return {
-        state,
-
         isLaunchOptionsDialogVisible,
         isOpeningInstance,
         launchDialogData,

src/stores/location.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive } from 'vue';
+import { ref } from 'vue';
 import { database } from '../service/database';
 import {
     getGroupName,
@@ -26,38 +26,15 @@ export const useLocationStore = defineStore('Location', () => {
     const photonStore = usePhotonStore();
     const gameLogStore = useGameLogStore();
 
-    const state = reactive({
+    const lastLocation = ref({
-        lastLocation: {
         date: null,
         location: '',
         name: '',
         playerList: new Map(),
         friendList: new Map()
-        },
-        lastLocationDestination: '',
-        lastLocationDestinationTime: 0
-    });
-
-    const lastLocation = computed({
-        get: () => state.lastLocation,
-        set: (value) => {
-            state.lastLocation = value;
-        }
-    });
-
-    const lastLocationDestination = computed({
-        get: () => state.lastLocationDestination,
-        set: (value) => {
-            state.lastLocationDestination = value;
-        }
-    });
-
-    const lastLocationDestinationTime = computed({
-        get: () => state.lastLocationDestinationTime,
-        set: (value) => {
-            state.lastLocationDestinationTime = value;
-        }
     });
+    const lastLocationDestination = ref('');
+    const lastLocationDestinationTime = ref(0);
 
     function updateCurrentUserLocation() {
         const ref = userStore.cachedUsers.get(userStore.currentUser.id);
@@ -77,15 +54,15 @@ export const useLocationStore = defineStore('Location', () => {
         if (
             gameStore.isGameRunning &&
             !advancedSettingsStore.gameLogDisabled &&
-            state.lastLocation.location !== ''
+            lastLocation.value.location !== ''
         ) {
             // use gameLog instead of API when game is running
-            currentLocation = state.lastLocation.location;
+            currentLocation = lastLocation.value.location;
-            if (state.lastLocation.location === 'traveling') {
+            if (lastLocation.value.location === 'traveling') {
-                currentLocation = state.lastLocationDestination;
+                currentLocation = lastLocationDestination.value;
             }
-            ref.location = state.lastLocation.location;
+            ref.location = lastLocation.value.location;
-            ref.travelingToLocation = state.lastLocationDestination;
+            ref.travelingToLocation = lastLocationDestination.value;
         }
 
         ref.$online_for = userStore.currentUser.$online_for;
@@ -98,10 +75,10 @@ export const useLocationStore = defineStore('Location', () => {
             instanceStore.applyWorldDialogInstances();
             instanceStore.applyGroupDialogInstances();
         } else {
-            ref.$location_at = state.lastLocation.date;
+            ref.$location_at = lastLocation.value.date;
-            ref.$travelingToTime = state.lastLocationDestinationTime;
+            ref.$travelingToTime = lastLocationDestinationTime.value;
             userStore.currentUser.$travelingToTime =
-                state.lastLocationDestinationTime;
+                lastLocationDestinationTime.value;
         }
     }
 
@@ -117,26 +94,26 @@ export const useLocationStore = defineStore('Location', () => {
             // with the current state of things, lets not run this if we don't need to
             return;
         }
-        let lastLocation = '';
+        let lastLocationTemp = '';
         for (let i = gameLogStore.gameLogSessionTable.length - 1; i > -1; i--) {
             const item = gameLogStore.gameLogSessionTable[i];
             if (item.type === 'Location') {
-                lastLocation = item.location;
+                lastLocationTemp = item.location;
                 break;
             }
         }
-        if (lastLocation === location) {
+        if (lastLocationTemp === location) {
             return;
         }
-        state.lastLocationDestination = '';
+        lastLocationDestination.value = '';
-        state.lastLocationDestinationTime = 0;
+        lastLocationDestinationTime.value = 0;
 
         if (isRealInstance(location)) {
             const dt = new Date().toJSON();
             const L = parseLocation(location);
 
-            state.lastLocation.location = location;
+            lastLocation.value.location = location;
-            state.lastLocation.date = Date.now();
+            lastLocation.value.date = Date.now();
 
             const entry = {
                 created_at: dt,
@@ -156,8 +133,8 @@ export const useLocationStore = defineStore('Location', () => {
             instanceStore.applyWorldDialogInstances();
             instanceStore.applyGroupDialogInstances();
         } else {
-            state.lastLocation.location = '';
+            lastLocation.value.location = '';
-            state.lastLocation.date = null;
+            lastLocation.value.date = null;
         }
     }
 
@@ -186,14 +163,14 @@ export const useLocationStore = defineStore('Location', () => {
                 photonStore.photonEventTable.data;
             photonStore.photonEventTable.data = [];
         }
-        const playerList = Array.from(state.lastLocation.playerList.values());
+        const playerList = Array.from(lastLocation.value.playerList.values());
         const dataBaseEntries = [];
         for (const ref of playerList) {
             const entry = {
                 created_at: dateTime,
                 type: 'OnPlayerLeft',
                 displayName: ref.displayName,
-                location: state.lastLocation.location,
+                location: lastLocation.value.location,
                 userId: ref.userId,
                 time: dateTimeStamp - ref.joinTime
             };
@@ -201,16 +178,16 @@ export const useLocationStore = defineStore('Location', () => {
             gameLogStore.addGameLog(entry);
         }
         database.addGamelogJoinLeaveBulk(dataBaseEntries);
-        if (state.lastLocation.date !== null && state.lastLocation.date > 0) {
+        if (lastLocation.value.date !== null && lastLocation.value.date > 0) {
             const update = {
-                time: dateTimeStamp - state.lastLocation.date,
+                time: dateTimeStamp - lastLocation.value.date,
-                created_at: new Date(state.lastLocation.date).toJSON()
+                created_at: new Date(lastLocation.value.date).toJSON()
             };
             database.updateGamelogLocationTimeToDatabase(update);
         }
-        state.lastLocationDestination = '';
+        lastLocationDestination.value = '';
-        state.lastLocationDestinationTime = 0;
+        lastLocationDestinationTime.value = 0;
-        state.lastLocation = {
+        lastLocation.value = {
             date: 0,
             location: '',
             name: '',
@@ -229,8 +206,6 @@ export const useLocationStore = defineStore('Location', () => {
     }
 
     return {
-        state,
-
         lastLocation,
         lastLocationDestination,
         lastLocationDestinationTime,

src/stores/moderation.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { avatarModerationRequest, playerModerationRequest } from '../api';
 import { watchState } from '../service/watchState';
 import { useAvatarStore } from './avatar';
@@ -9,51 +9,21 @@ export const useModerationStore = defineStore('Moderation', () => {
     const avatarStore = useAvatarStore();
     const userStore = useUserStore();
 
-    const state = reactive({
+    const cachedPlayerModerations = ref(new Map());
-        cachedPlayerModerations: new Map(),
+    const cachedPlayerModerationsUserIds = ref(new Set());
-        cachedPlayerModerationsUserIds: new Set(),
+    const isPlayerModerationsLoading = ref(false);
-        isPlayerModerationsLoading: false,
+    const playerModerationTable = ref({
-        playerModerationTable: {
         data: [],
         pageSize: 15
-        }
-    });
-
-    const cachedPlayerModerations = computed({
-        get: () => state.cachedPlayerModerations,
-        set: (value) => {
-            state.cachedPlayerModerations = value;
-        }
-    });
-
-    const cachedPlayerModerationsUserIds = computed({
-        get: () => state.cachedPlayerModerationsUserIds,
-        set: (value) => {
-            state.cachedPlayerModerationsUserIds = value;
-        }
-    });
-
-    const isPlayerModerationsLoading = computed({
-        get: () => state.isPlayerModerationsLoading,
-        set: (value) => {
-            state.isPlayerModerationsLoading = value;
-        }
-    });
-
-    const playerModerationTable = computed({
-        get: () => state.playerModerationTable,
-        set: (value) => {
-            state.playerModerationTable = value;
-        }
     });
 
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
-            state.cachedPlayerModerations.clear();
+            cachedPlayerModerations.value.clear();
-            state.cachedPlayerModerationsUserIds.clear();
+            cachedPlayerModerationsUserIds.value.clear();
-            state.isPlayerModerationsLoading = false;
+            isPlayerModerationsLoading.value = false;
-            state.playerModerationTable.data = [];
+            playerModerationTable.value.data = [];
             if (isLoggedIn) {
                 refreshPlayerModerations();
             }
@@ -65,14 +35,14 @@ export const useModerationStore = defineStore('Moderation', () => {
         const { ref } = args;
 
         let hasModeration = false;
-        for (const ref of state.cachedPlayerModerations.values()) {
+        for (const ref of cachedPlayerModerations.value.values()) {
             if (ref.targetUserId === ref.targetUserId) {
                 hasModeration = true;
                 break;
             }
         }
         if (!hasModeration) {
-            state.cachedPlayerModerationsUserIds.delete(ref.targetUserId);
+            cachedPlayerModerationsUserIds.value.delete(ref.targetUserId);
         }
 
         const userRef = userStore.cachedUsers.get(ref.targetUserId);
@@ -80,7 +50,7 @@ export const useModerationStore = defineStore('Moderation', () => {
             userRef.$moderations = getUserModerations(ref.targetUserId);
         }
 
-        const array = state.playerModerationTable.data;
+        const array = playerModerationTable.value.data;
         const { length } = array;
         for (let i = 0; i < length; ++i) {
             if (array[i].id === ref.id) {
@@ -113,13 +83,13 @@ export const useModerationStore = defineStore('Moderation', () => {
     function handlePlayerModerationDelete(args) {
         let { type, moderated } = args.params;
         const userId = userStore.currentUser.id;
-        for (let ref of state.cachedPlayerModerations.values()) {
+        for (let ref of cachedPlayerModerations.value.values()) {
             if (
                 ref.type === type &&
                 ref.targetUserId === moderated &&
                 ref.sourceUserId === userId
             ) {
-                state.cachedPlayerModerations.delete(ref.id);
+                cachedPlayerModerations.value.delete(ref.id);
                 handlePlayerModerationAtDelete({
                     ref,
                     params: {
@@ -137,7 +107,7 @@ export const useModerationStore = defineStore('Moderation', () => {
      * @returns {object}
      */
     function applyPlayerModeration(json) {
-        let ref = state.cachedPlayerModerations.get(json.id);
+        let ref = cachedPlayerModerations.value.get(json.id);
         if (typeof ref === 'undefined') {
             ref = {
                 id: '',
@@ -152,15 +122,15 @@ export const useModerationStore = defineStore('Moderation', () => {
                 //
                 ...json
             };
-            state.cachedPlayerModerations.set(ref.id, ref);
+            cachedPlayerModerations.value.set(ref.id, ref);
         } else {
             Object.assign(ref, json);
             ref.$isExpired = false;
         }
         if (json.targetUserId) {
-            state.cachedPlayerModerationsUserIds.add(json.targetUserId);
+            cachedPlayerModerationsUserIds.value.add(json.targetUserId);
         }
-        const array = state.playerModerationTable.data;
+        const array = playerModerationTable.value.data;
         const index = array.findIndex((item) => item.id === ref.id);
         if (index !== -1) {
             array[index] = ref;
@@ -175,14 +145,14 @@ export const useModerationStore = defineStore('Moderation', () => {
     }
 
     function expirePlayerModerations() {
-        state.cachedPlayerModerationsUserIds.clear();
+        cachedPlayerModerationsUserIds.value.clear();
-        for (let ref of state.cachedPlayerModerations.values()) {
+        for (let ref of cachedPlayerModerations.value.values()) {
             ref.$isExpired = true;
         }
     }
 
     function deleteExpiredPlayerModerations() {
-        for (let ref of state.cachedPlayerModerations.values()) {
+        for (let ref of cachedPlayerModerations.value.values()) {
             if (!ref.$isExpired) {
                 continue;
             }
@@ -196,17 +166,17 @@ export const useModerationStore = defineStore('Moderation', () => {
     }
 
     async function refreshPlayerModerations() {
-        if (state.isPlayerModerationsLoading) {
+        if (isPlayerModerationsLoading.value) {
             return;
         }
-        state.isPlayerModerationsLoading = true;
+        isPlayerModerationsLoading.value = true;
         expirePlayerModerations();
         Promise.all([
             playerModerationRequest.getPlayerModerations(),
             avatarModerationRequest.getAvatarModerations()
         ])
             .finally(() => {
-                state.isPlayerModerationsLoading = false;
+                isPlayerModerationsLoading.value = false;
             })
             .then((res) => {
                 // TODO: compare with cachedAvatarModerations
@@ -247,7 +217,7 @@ export const useModerationStore = defineStore('Moderation', () => {
             isAvatarInteractionDisabled: false,
             isChatBoxMuted: false
         };
-        for (let ref of state.cachedPlayerModerations.values()) {
+        for (let ref of cachedPlayerModerations.value.values()) {
             if (ref.targetUserId !== userId) {
                 continue;
             }
@@ -270,8 +240,6 @@ export const useModerationStore = defineStore('Moderation', () => {
     }
 
     return {
-        state,
-
         cachedPlayerModerations,
         cachedPlayerModerationsUserIds,
         isPlayerModerationsLoading,

src/stores/notification.js

@@ -1,6 +1,6 @@
 import Noty from 'noty';
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { ref, watch } from 'vue';
 import {
     instanceRequest,
     notificationRequest,
@@ -49,9 +49,9 @@ export const useNotificationStore = defineStore('Notification', () => {
     const gameStore = useGameStore();
     const sharedFeedStore = useSharedFeedStore();
     const instanceStore = useInstanceStore();
-    const state = reactive({
+
-        notificationInitStatus: false,
+    const notificationInitStatus = ref(false);
-        notificationTable: {
+    const notificationTable = ref({
         data: [],
         filters: [
             {
@@ -79,14 +79,26 @@ export const useNotificationStore = defineStore('Notification', () => {
             layout: 'sizes,prev,pager,next,total',
             pageSizes: [10, 15, 20, 25, 50, 100]
         }
-        },
-        unseenNotifications: [],
-        isNotificationsLoading: false,
-        notyMap: []
     });
+    const unseenNotifications = ref([]);
+    const isNotificationsLoading = ref(false);
+
+    const notyMap = ref([]);
+
+    watch(
+        () => watchState.isLoggedIn,
+        (isLoggedIn) => {
+            isNotificationsLoading.value = false;
+            notificationTable.value.data = [];
+            if (isLoggedIn) {
+                initNotifications();
+            }
+        },
+        { flush: 'sync' }
+    );
 
     async function init() {
-        state.notificationTable.filters[0].value = JSON.parse(
+        notificationTable.value.filters[0].value = JSON.parse(
             await configRepository.getString(
                 'VRCX_notificationTableFilters',
                 '[]'
@@ -96,50 +108,10 @@ export const useNotificationStore = defineStore('Notification', () => {
 
     init();
 
-    const notificationInitStatus = computed({
-        get: () => state.notificationInitStatus,
-        set: (value) => {
-            state.notificationInitStatus = value;
-        }
-    });
-
-    const notificationTable = computed({
-        get: () => state.notificationTable,
-        set: (value) => {
-            state.notificationTable = value;
-        }
-    });
-
-    const unseenNotifications = computed({
-        get: () => state.unseenNotifications,
-        set: (value) => {
-            state.unseenNotifications = value;
-        }
-    });
-
-    const isNotificationsLoading = computed({
-        get: () => state.isNotificationsLoading,
-        set: (value) => {
-            state.isNotificationsLoading = value;
-        }
-    });
-
-    watch(
-        () => watchState.isLoggedIn,
-        (isLoggedIn) => {
-            state.isNotificationsLoading = false;
-            state.notificationTable.data = [];
-            if (isLoggedIn) {
-                initNotifications();
-            }
-        },
-        { flush: 'sync' }
-    );
-
     function handleNotification(args) {
         args.ref = applyNotification(args.json);
         const { ref } = args;
-        const array = state.notificationTable.data;
+        const array = notificationTable.value.data;
         const { length } = array;
         for (let i = 0; i < length; ++i) {
             if (array[i].id === ref.id) {
@@ -155,7 +127,7 @@ export const useNotificationStore = defineStore('Notification', () => {
             ) {
                 database.addNotificationToDatabase(ref);
             }
-            if (watchState.isFriendsLoaded && state.notificationInitStatus) {
+            if (watchState.isFriendsLoaded && notificationInitStatus.value) {
                 if (
                     ref.details?.worldId &&
                     !instanceStore.cachedInstances.has(ref.details.worldId)
@@ -170,16 +142,16 @@ export const useNotificationStore = defineStore('Notification', () => {
                     }
                 }
                 if (
-                    state.notificationTable.filters[0].value.length === 0 ||
+                    notificationTable.value.filters[0].value.length === 0 ||
-                    state.notificationTable.filters[0].value.includes(ref.type)
+                    notificationTable.value.filters[0].value.includes(ref.type)
                 ) {
                     uiStore.notifyMenu('notification');
                 }
-                state.unseenNotifications.push(ref.id);
+                unseenNotifications.value.push(ref.id);
                 queueNotificationNoty(ref);
             }
         }
-        state.notificationTable.data.push(ref);
+        notificationTable.value.data.push(ref);
         sharedFeedStore.updateSharedFeed(true);
         const D = userStore.userDialog;
         if (
@@ -195,7 +167,7 @@ export const useNotificationStore = defineStore('Notification', () => {
 
     function handleNotificationHide(args) {
         let ref;
-        const array = state.notificationTable.data;
+        const array = notificationTable.value.data;
         for (let i = array.length - 1; i >= 0; i--) {
             if (array[i].id === args.params.notificationId) {
                 ref = array[i];
@@ -326,15 +298,15 @@ export const useNotificationStore = defineStore('Notification', () => {
 
     function handleNotificationSee(args) {
         const { notificationId } = args.params;
-        removeFromArray(state.unseenNotifications, notificationId);
+        removeFromArray(unseenNotifications.value, notificationId);
-        if (state.unseenNotifications.length === 0) {
+        if (unseenNotifications.value.length === 0) {
             uiStore.removeNotify('notification');
         }
     }
 
     function handleNotificationAccept(args) {
         let ref;
-        const array = state.notificationTable.data;
+        const array = notificationTable.value.data;
         for (let i = array.length - 1; i >= 0; i--) {
             if (array[i].id === args.params.notificationId) {
                 ref = array[i];
@@ -393,7 +365,7 @@ export const useNotificationStore = defineStore('Notification', () => {
             json.message = replaceBioSymbols(json.message);
         }
         let ref;
-        const array = state.notificationTable.data;
+        const array = notificationTable.value.data;
         for (let i = array.length - 1; i >= 0; i--) {
             if (array[i].id === json.id) {
                 ref = array[i];
@@ -443,7 +415,7 @@ export const useNotificationStore = defineStore('Notification', () => {
     }
 
     function expireFriendRequestNotifications() {
-        const array = state.notificationTable.data;
+        const array = notificationTable.value.data;
         for (let i = array.length - 1; i >= 0; i--) {
             if (
                 array[i].type === 'friendRequest' ||
@@ -461,7 +433,7 @@ export const useNotificationStore = defineStore('Notification', () => {
      */
     function expireNotification(notificationId) {
         let ref;
-        const array = state.notificationTable.data;
+        const array = notificationTable.value.data;
         for (let i = array.length - 1; i >= 0; i--) {
             if (array[i].id === notificationId) {
                 ref = array[i];
@@ -502,7 +474,7 @@ export const useNotificationStore = defineStore('Notification', () => {
      * @returns {Promise<void>}
      */
     async function refreshNotifications() {
-        state.isNotificationsLoading = true;
+        isNotificationsLoading.value = true;
         let count;
         let params;
         try {
@@ -522,7 +494,7 @@ export const useNotificationStore = defineStore('Notification', () => {
                         }
                     });
                 }
-                state.unseenNotifications = [];
+                unseenNotifications.value = [];
                 params.offset += 100;
                 if (args.json.length < 100) {
                     break;
@@ -552,7 +524,7 @@ export const useNotificationStore = defineStore('Notification', () => {
                     });
                 }
 
-                state.unseenNotifications = [];
+                unseenNotifications.value = [];
                 params.offset += 100;
                 if (args.json.length < 100) {
                     break;
@@ -575,7 +547,7 @@ export const useNotificationStore = defineStore('Notification', () => {
                         }
                     });
                 }
-                state.unseenNotifications = [];
+                unseenNotifications.value = [];
                 params.offset += 100;
                 if (args.json.length < 100) {
                     break;
@@ -584,8 +556,8 @@ export const useNotificationStore = defineStore('Notification', () => {
         } catch (err) {
             console.error(err);
         } finally {
-            state.isNotificationsLoading = false;
+            isNotificationsLoading.value = false;
-            state.notificationInitStatus = true;
+            notificationInitStatus.value = true;
         }
     }
 
@@ -628,12 +600,12 @@ export const useNotificationStore = defineStore('Notification', () => {
             // don't play noty twice
             const notyId = `${noty.type},${displayName}`;
             if (
-                state.notyMap[notyId] &&
+                notyMap.value[notyId] &&
-                state.notyMap[notyId] >= noty.created_at
+                notyMap.value[notyId] >= noty.created_at
             ) {
                 return;
             }
-            state.notyMap[notyId] = noty.created_at;
+            notyMap.value[notyId] = noty.created_at;
         }
         const bias = new Date(Date.now() - 60000).toJSON();
         if (noty.created_at < bias) {
@@ -1255,10 +1227,14 @@ export const useNotificationStore = defineStore('Notification', () => {
      */
     function displayXSNotification(noty, message, image) {
         const timeout = Math.floor(
-            parseInt(notificationsSettingsStore.notificationTimeout, 10) / 1000
+            parseInt(
+                notificationsSettingsStore.notificationTimeout.toString(),
+                10
+            ) / 1000
         );
         const opacity =
-            parseFloat(advancedSettingsStore.notificationOpacity) / 100;
+            parseFloat(advancedSettingsStore.notificationOpacity.toString()) /
+            100;
         switch (noty.type) {
             case 'OnPlayerJoined':
                 AppApi.XSNotification(
@@ -1655,10 +1631,14 @@ export const useNotificationStore = defineStore('Notification', () => {
         image
     ) {
         const timeout = Math.floor(
-            parseInt(notificationsSettingsStore.notificationTimeout, 10) / 1000
+            parseInt(
+                notificationsSettingsStore.notificationTimeout.toString(),
+                10
+            ) / 1000
         );
         const opacity =
-            parseFloat(advancedSettingsStore.notificationOpacity) / 100;
+            parseFloat(advancedSettingsStore.notificationOpacity.toString()) /
+            100;
         switch (noty.type) {
             case 'OnPlayerJoined':
                 AppApi.OVRTNotification(
@@ -2340,14 +2320,12 @@ export const useNotificationStore = defineStore('Notification', () => {
     }
 
     async function initNotifications() {
-        state.notificationInitStatus = false;
+        notificationInitStatus.value = false;
-        state.notificationTable.data = await database.getNotifications();
+        notificationTable.value.data = await database.getNotifications();
         refreshNotifications();
     }
 
     return {
-        state,
-
         notificationInitStatus,
         notificationTable,
         unseenNotifications,

src/stores/search.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { instanceRequest, userRequest } from '../api';
 import { groupRequest } from '../api/';
@@ -25,33 +25,10 @@ export const useSearchStore = defineStore('Search', () => {
     const groupStore = useGroupStore();
     const { t } = useI18n();
 
-    const state = reactive({
+    const searchText = ref('');
-        searchText: '',
+    const searchUserResults = ref([]);
-        searchUserResults: [],
+    const quickSearchItems = ref([]);
-        quickSearchItems: [],
+    const friendsListSearch = ref('');
-        friendsListSearch: ''
-    });
-
-    const searchText = computed({
-        get: () => state.searchText,
-        set: (value) => {
-            state.searchText = value;
-        }
-    });
-
-    const searchUserResults = computed({
-        get: () => state.searchUserResults,
-        set: (value) => {
-            state.searchUserResults = value;
-        }
-    });
-
-    const quickSearchItems = computed({
-        get: () => state.quickSearchItems,
-        set: (value) => {
-            state.quickSearchItems = value;
-        }
-    });
 
     const stringComparer = computed(() =>
         Intl.Collator(appearanceSettingsStore.appLanguage.replace('_', '-'), {
@@ -60,25 +37,18 @@ export const useSearchStore = defineStore('Search', () => {
         })
     );
 
-    const friendsListSearch = computed({
-        get: () => state.friendsListSearch,
-        set: (value) => {
-            state.friendsListSearch = value;
-        }
-    });
-
     watch(
         () => watchState.isLoggedIn,
         () => {
-            state.searchText = '';
+            searchText.value = '';
-            state.searchUserResults = [];
+            searchUserResults.value = [];
         },
         { flush: 'sync' }
     );
 
     function clearSearch() {
-        state.searchText = '';
+        searchText.value = '';
-        state.searchUserResults = [];
+        searchUserResults.value = [];
     }
 
     async function searchUserByDisplayName(displayName) {
@@ -114,26 +84,26 @@ export const useSearchStore = defineStore('Search', () => {
                     map.set(ref.id, ref);
                 }
             }
-            state.searchUserResults = Array.from(map.values());
+            searchUserResults.value = Array.from(map.values());
             return args;
         });
     }
 
     function quickSearchRemoteMethod(query) {
         if (!query) {
-            state.quickSearchItems = quickSearchUserHistory();
+            quickSearchItems.value = quickSearchUserHistory();
             return;
         }
 
         if (query.length < 2) {
-            state.quickSearchItems = quickSearchUserHistory();
+            quickSearchItems.value = quickSearchUserHistory();
             return;
         }
 
         const results = [];
         const cleanQuery = removeWhitespace(query);
         if (!cleanQuery) {
-            state.quickSearchItems = quickSearchUserHistory();
+            quickSearchItems.value = quickSearchUserHistory();
             return;
         }
 
@@ -205,19 +175,19 @@ export const useSearchStore = defineStore('Search', () => {
             label: query
         });
 
-        state.quickSearchItems = results;
+        quickSearchItems.value = results;
     }
 
     function quickSearchChange(value) {
         if (value) {
             if (value.startsWith('search:')) {
                 const searchText = value.substr(7);
-                if (state.quickSearchItems.length > 1 && searchText.length) {
+                if (quickSearchItems.value.length > 1 && searchText.length) {
-                    state.friendsListSearch = searchText;
+                    friendsListSearch.value = searchText;
                     uiStore.menuActiveIndex = 'friendList';
                 } else {
                     uiStore.menuActiveIndex = 'search';
-                    state.searchText = searchText;
+                    searchText.value = searchText;
                     userStore.lookupUser({ displayName: searchText });
                 }
             } else {
@@ -409,8 +379,6 @@ export const useSearchStore = defineStore('Search', () => {
     }
 
     return {
-        state,
-
         searchText,
         searchUserResults,
         stringComparer,

src/stores/settings/advanced.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { useI18n } from 'vue-i18n';
 import configRepository from '../../service/config';
@@ -19,70 +19,80 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
     const { t } = useI18n();
 
     const state = reactive({
-        enablePrimaryPassword: false,
+        folderSelectorDialogVisible: false
-        relaunchVRChatAfterCrash: false,
-        vrcQuitFix: true,
-        autoSweepVRChatCache: false,
-        selfInviteOverride: false,
-        saveInstancePrints: false,
-        cropInstancePrints: false,
-        saveInstanceStickers: false,
-        avatarRemoteDatabase: true,
-        enableAppLauncher: true,
-        enableAppLauncherAutoClose: true,
-        enableAppLauncherRunProcessOnce: true,
-        screenshotHelper: true,
-        screenshotHelperModifyFilename: false,
-        screenshotHelperCopyToClipboard: false,
-        youTubeApi: false,
-        youTubeApiKey: '',
-        progressPie: false,
-        progressPieFilter: true,
-        showConfirmationOnSwitchAvatar: false,
-        gameLogDisabled: false,
-        sqliteTableSizes: {},
-        ugcFolderPath: '',
-        currentUserInventory: new Map(),
-        autoDeleteOldPrints: false,
-        notificationOpacity: 100,
-        folderSelectorDialogVisible: false,
-        isVRChatConfigDialogVisible: false,
-        saveInstanceEmoji: false,
-        vrcRegistryAutoBackup: true,
-        vrcRegistryAskRestore: true,
-        sentryErrorReporting: false
     });
 
+    const enablePrimaryPassword = ref(false);
+    const relaunchVRChatAfterCrash = ref(false);
+    const vrcQuitFix = ref(true);
+    const autoSweepVRChatCache = ref(false);
+    const selfInviteOverride = ref(false);
+    const saveInstancePrints = ref(false);
+    const cropInstancePrints = ref(false);
+    const saveInstanceStickers = ref(false);
+    const avatarRemoteDatabase = ref(true);
+    const enableAppLauncher = ref(true);
+    const enableAppLauncherAutoClose = ref(true);
+    const enableAppLauncherRunProcessOnce = ref(true);
+    const screenshotHelper = ref(true);
+    const screenshotHelperModifyFilename = ref(false);
+    const screenshotHelperCopyToClipboard = ref(false);
+    const youTubeApi = ref(false);
+    const youTubeApiKey = ref('');
+    const progressPie = ref(false);
+    const progressPieFilter = ref(true);
+    const showConfirmationOnSwitchAvatar = ref(false);
+    const gameLogDisabled = ref(false);
+    const sqliteTableSizes = ref({});
+    const ugcFolderPath = ref('');
+    const autoDeleteOldPrints = ref(false);
+    const notificationOpacity = ref(100);
+    const currentUserInventory = ref(new Map());
+    const isVRChatConfigDialogVisible = ref(false);
+    const saveInstanceEmoji = ref(false);
+    const vrcRegistryAutoBackup = ref(true);
+    const vrcRegistryAskRestore = ref(true);
+    const sentryErrorReporting = ref(false);
+
+    watch(
+        () => watchState.isLoggedIn,
+        () => {
+            currentUserInventory.value.clear();
+            isVRChatConfigDialogVisible.value = false;
+        },
+        { flush: 'sync' }
+    );
+
     async function initAdvancedSettings() {
         const [
-            enablePrimaryPassword,
+            enablePrimaryPasswordConfig,
-            relaunchVRChatAfterCrash,
+            relaunchVRChatAfterCrashConfig,
-            vrcQuitFix,
+            vrcQuitFixConfig,
-            autoSweepVRChatCache,
+            autoSweepVRChatCacheConfig,
-            selfInviteOverride,
+            selfInviteOverrideConfig,
-            saveInstancePrints,
+            saveInstancePrintsConfig,
-            cropInstancePrints,
+            cropInstancePrintsConfig,
-            saveInstanceStickers,
+            saveInstanceStickersConfig,
-            avatarRemoteDatabase,
+            avatarRemoteDatabaseConfig,
-            enableAppLauncher,
+            enableAppLauncherConfig,
-            enableAppLauncherAutoClose,
+            enableAppLauncherAutoCloseConfig,
-            enableAppLauncherRunProcessOnce,
+            enableAppLauncherRunProcessOnceConfig,
-            screenshotHelper,
+            screenshotHelperConfig,
-            screenshotHelperModifyFilename,
+            screenshotHelperModifyFilenameConfig,
-            screenshotHelperCopyToClipboard,
+            screenshotHelperCopyToClipboardConfig,
-            youTubeApi,
+            youTubeApiConfig,
-            youTubeApiKey,
+            youTubeApiKeyConfig,
-            progressPie,
+            progressPieConfig,
-            progressPieFilter,
+            progressPieFilterConfig,
-            showConfirmationOnSwitchAvatar,
+            showConfirmationOnSwitchAvatarConfig,
-            gameLogDisabled,
+            gameLogDisabledConfig,
-            ugcFolderPath,
+            ugcFolderPathConfig,
-            autoDeleteOldPrints,
+            autoDeleteOldPrintsConfig,
-            notificationOpacity,
+            notificationOpacityConfig,
-            saveInstanceEmoji,
+            saveInstanceEmojiConfig,
-            vrcRegistryAutoBackup,
+            vrcRegistryAutoBackupConfig,
-            vrcRegistryAskRestore,
+            vrcRegistryAskRestoreConfig,
-            sentryErrorReporting
+            sentryErrorReportingConfig
         ] = await Promise.all([
             configRepository.getBool('enablePrimaryPassword', false),
             configRepository.getBool('VRCX_relaunchVRChatAfterCrash', false),
@@ -126,41 +136,45 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
             configRepository.getString('VRCX_SentryEnabled', '')
         ]);
 
-        state.enablePrimaryPassword = enablePrimaryPassword;
+        enablePrimaryPassword.value = enablePrimaryPasswordConfig;
-        state.relaunchVRChatAfterCrash = relaunchVRChatAfterCrash;
+        relaunchVRChatAfterCrash.value = relaunchVRChatAfterCrashConfig;
-        state.vrcQuitFix = vrcQuitFix;
+        vrcQuitFix.value = vrcQuitFixConfig;
-        state.autoSweepVRChatCache = autoSweepVRChatCache;
+        autoSweepVRChatCache.value = autoSweepVRChatCacheConfig;
-        state.selfInviteOverride = selfInviteOverride;
+        selfInviteOverride.value = selfInviteOverrideConfig;
-        state.saveInstancePrints = saveInstancePrints;
+        saveInstancePrints.value = saveInstancePrintsConfig;
-        state.cropInstancePrints = cropInstancePrints;
+        cropInstancePrints.value = cropInstancePrintsConfig;
-        state.saveInstanceStickers = saveInstanceStickers;
+        saveInstanceStickers.value = saveInstanceStickersConfig;
-        state.avatarRemoteDatabase = avatarRemoteDatabase;
+        avatarRemoteDatabase.value = avatarRemoteDatabaseConfig;
-        state.enableAppLauncher = enableAppLauncher;
+        enableAppLauncher.value = enableAppLauncherConfig;
-        state.enableAppLauncherAutoClose = enableAppLauncherAutoClose;
+        enableAppLauncherAutoClose.value = enableAppLauncherAutoCloseConfig;
-        state.enableAppLauncherRunProcessOnce = enableAppLauncherRunProcessOnce;
+        enableAppLauncherRunProcessOnce.value =
-        state.screenshotHelper = screenshotHelper;
+            enableAppLauncherRunProcessOnceConfig;
-        state.screenshotHelperModifyFilename = screenshotHelperModifyFilename;
+        screenshotHelper.value = screenshotHelperConfig;
-        state.screenshotHelperCopyToClipboard = screenshotHelperCopyToClipboard;
+        screenshotHelperModifyFilename.value =
-        state.youTubeApi = youTubeApi;
+            screenshotHelperModifyFilenameConfig;
-        state.youTubeApiKey = youTubeApiKey;
+        screenshotHelperCopyToClipboard.value =
-        state.progressPie = progressPie;
+            screenshotHelperCopyToClipboardConfig;
-        state.progressPieFilter = progressPieFilter;
+        youTubeApi.value = youTubeApiConfig;
-        state.showConfirmationOnSwitchAvatar = showConfirmationOnSwitchAvatar;
+        youTubeApiKey.value = youTubeApiKeyConfig;
-        state.gameLogDisabled = gameLogDisabled;
+        progressPie.value = progressPieConfig;
-        state.ugcFolderPath = ugcFolderPath;
+        progressPieFilter.value = progressPieFilterConfig;
-        state.autoDeleteOldPrints = autoDeleteOldPrints;
+        showConfirmationOnSwitchAvatar.value =
-        state.notificationOpacity = notificationOpacity;
+            showConfirmationOnSwitchAvatarConfig;
-        state.saveInstanceEmoji = saveInstanceEmoji;
+        gameLogDisabled.value = gameLogDisabledConfig;
-        state.vrcRegistryAutoBackup = vrcRegistryAutoBackup;
+        ugcFolderPath.value = ugcFolderPathConfig;
-        state.vrcRegistryAskRestore = vrcRegistryAskRestore;
+        autoDeleteOldPrints.value = autoDeleteOldPrintsConfig;
-        state.sentryErrorReporting = sentryErrorReporting === 'true';
+        notificationOpacity.value = notificationOpacityConfig;
+        saveInstanceEmoji.value = saveInstanceEmojiConfig;
+        vrcRegistryAutoBackup.value = vrcRegistryAutoBackupConfig;
+        vrcRegistryAskRestore.value = vrcRegistryAskRestoreConfig;
+        sentryErrorReporting.value = sentryErrorReportingConfig === 'true';
 
         handleSetAppLauncherSettings();
 
         setTimeout(() => {
             if (
                 VRCXUpdaterStore.branch === 'Nightly' &&
-                sentryErrorReporting === ''
+                sentryErrorReportingConfig === ''
             ) {
                 checkSentryConsent();
             }
@@ -169,79 +183,6 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
 
     initAdvancedSettings();
 
-    watch(
-        () => watchState.isLoggedIn,
-        () => {
-            state.currentUserInventory.clear();
-            state.isVRChatConfigDialogVisible = false;
-        },
-        { flush: 'sync' }
-    );
-
-    const enablePrimaryPassword = computed({
-        get: () => state.enablePrimaryPassword,
-        set: (value) => (state.enablePrimaryPassword = value)
-    });
-    const relaunchVRChatAfterCrash = computed(
-        () => state.relaunchVRChatAfterCrash
-    );
-    const vrcQuitFix = computed(() => state.vrcQuitFix);
-    const autoSweepVRChatCache = computed(() => state.autoSweepVRChatCache);
-    const selfInviteOverride = computed(() => state.selfInviteOverride);
-    const saveInstancePrints = computed(() => state.saveInstancePrints);
-    const cropInstancePrints = computed(() => state.cropInstancePrints);
-    const saveInstanceStickers = computed(() => state.saveInstanceStickers);
-    const avatarRemoteDatabase = computed(() => state.avatarRemoteDatabase);
-    const enableAppLauncher = computed(() => state.enableAppLauncher);
-    const enableAppLauncherAutoClose = computed(
-        () => state.enableAppLauncherAutoClose
-    );
-    const enableAppLauncherRunProcessOnce = computed(
-        () => state.enableAppLauncherRunProcessOnce
-    );
-    const screenshotHelper = computed(() => state.screenshotHelper);
-    ``;
-    const screenshotHelperModifyFilename = computed(
-        () => state.screenshotHelperModifyFilename
-    );
-    const screenshotHelperCopyToClipboard = computed(
-        () => state.screenshotHelperCopyToClipboard
-    );
-    const youTubeApi = computed(() => state.youTubeApi);
-    const youTubeApiKey = computed({
-        get: () => state.youTubeApiKey,
-        set: (value) => (state.youTubeApiKey = value)
-    });
-    const progressPie = computed(() => state.progressPie);
-    const progressPieFilter = computed(() => state.progressPieFilter);
-    const showConfirmationOnSwitchAvatar = computed(
-        () => state.showConfirmationOnSwitchAvatar
-    );
-    const gameLogDisabled = computed(() => state.gameLogDisabled);
-    const sqliteTableSizes = computed(() => state.sqliteTableSizes);
-    const ugcFolderPath = computed(() => state.ugcFolderPath);
-    const autoDeleteOldPrints = computed(() => state.autoDeleteOldPrints);
-    const notificationOpacity = computed(() => state.notificationOpacity);
-
-    const currentUserInventory = computed({
-        get: () => state.currentUserInventory,
-        set: (value) => {
-            state.currentUserInventory = value;
-        }
-    });
-    const isVRChatConfigDialogVisible = computed({
-        get: () => state.isVRChatConfigDialogVisible,
-        set: (value) => (state.isVRChatConfigDialogVisible = value)
-    });
-
-    const saveInstanceEmoji = computed({
-        get: () => state.saveInstanceEmoji,
-        set: (value) => (state.saveInstanceEmoji = value)
-    });
-    const vrcRegistryAutoBackup = computed(() => state.vrcRegistryAutoBackup);
-    const vrcRegistryAskRestore = computed(() => state.vrcRegistryAskRestore);
-    const sentryErrorReporting = computed(() => state.sentryErrorReporting);
-
     /**
      * @param {boolean} value
      */
@@ -249,155 +190,155 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
         configRepository.setBool('enablePrimaryPassword', value);
     }
     function setRelaunchVRChatAfterCrash() {
-        state.relaunchVRChatAfterCrash = !state.relaunchVRChatAfterCrash;
+        relaunchVRChatAfterCrash.value = !relaunchVRChatAfterCrash.value;
         configRepository.setBool(
             'VRCX_relaunchVRChatAfterCrash',
-            state.relaunchVRChatAfterCrash
+            relaunchVRChatAfterCrash.value
         );
     }
     function setVrcQuitFix() {
-        state.vrcQuitFix = !state.vrcQuitFix;
+        vrcQuitFix.value = !vrcQuitFix.value;
-        configRepository.setBool('VRCX_vrcQuitFix', state.vrcQuitFix);
+        configRepository.setBool('VRCX_vrcQuitFix', vrcQuitFix.value);
     }
     function setAutoSweepVRChatCache() {
-        state.autoSweepVRChatCache = !state.autoSweepVRChatCache;
+        autoSweepVRChatCache.value = !autoSweepVRChatCache.value;
         configRepository.setBool(
             'VRCX_autoSweepVRChatCache',
-            state.autoSweepVRChatCache
+            autoSweepVRChatCache.value
         );
     }
     function setSelfInviteOverride() {
-        state.selfInviteOverride = !state.selfInviteOverride;
+        selfInviteOverride.value = !selfInviteOverride.value;
         configRepository.setBool(
             'VRCX_selfInviteOverride',
-            state.selfInviteOverride
+            selfInviteOverride.value
         );
     }
     function setSaveInstancePrints() {
-        state.saveInstancePrints = !state.saveInstancePrints;
+        saveInstancePrints.value = !saveInstancePrints.value;
         configRepository.setBool(
             'VRCX_saveInstancePrints',
-            state.saveInstancePrints
+            saveInstancePrints.value
         );
     }
     function setCropInstancePrints() {
-        state.cropInstancePrints = !state.cropInstancePrints;
+        cropInstancePrints.value = !cropInstancePrints.value;
         configRepository.setBool(
             'VRCX_cropInstancePrints',
-            state.cropInstancePrints
+            cropInstancePrints.value
         );
     }
     function setSaveInstanceStickers() {
-        state.saveInstanceStickers = !state.saveInstanceStickers;
+        saveInstanceStickers.value = !saveInstanceStickers.value;
         configRepository.setBool(
             'VRCX_saveInstanceStickers',
-            state.saveInstanceStickers
+            saveInstanceStickers.value
         );
     }
     /**
      * @param {boolean} value
      */
     function setAvatarRemoteDatabase(value) {
-        state.avatarRemoteDatabase = value;
+        avatarRemoteDatabase.value = value;
         configRepository.setBool(
             'VRCX_avatarRemoteDatabase',
-            state.avatarRemoteDatabase
+            avatarRemoteDatabase.value
         );
     }
     async function setEnableAppLauncher() {
-        state.enableAppLauncher = !state.enableAppLauncher;
+        enableAppLauncher.value = !enableAppLauncher.value;
         await configRepository.setBool(
             'VRCX_enableAppLauncher',
-            state.enableAppLauncher
+            enableAppLauncher.value
         );
         handleSetAppLauncherSettings();
     }
     async function setEnableAppLauncherAutoClose() {
-        state.enableAppLauncherAutoClose = !state.enableAppLauncherAutoClose;
+        enableAppLauncherAutoClose.value = !enableAppLauncherAutoClose.value;
         await configRepository.setBool(
             'VRCX_enableAppLauncherAutoClose',
-            state.enableAppLauncherAutoClose
+            enableAppLauncherAutoClose.value
         );
         handleSetAppLauncherSettings();
     }
     async function setEnableAppLauncherRunProcessOnce() {
-        state.enableAppLauncherRunProcessOnce =
+        enableAppLauncherRunProcessOnce.value =
-            !state.enableAppLauncherRunProcessOnce;
+            !enableAppLauncherRunProcessOnce.value;
         await configRepository.setBool(
             'VRCX_enableAppLauncherRunProcessOnce',
-            state.enableAppLauncherRunProcessOnce
+            enableAppLauncherRunProcessOnce.value
         );
         handleSetAppLauncherSettings();
     }
     async function setScreenshotHelper() {
-        state.screenshotHelper = !state.screenshotHelper;
+        screenshotHelper.value = !screenshotHelper.value;
         await configRepository.setBool(
             'VRCX_screenshotHelper',
-            state.screenshotHelper
+            screenshotHelper.value
         );
     }
     async function setScreenshotHelperModifyFilename() {
-        state.screenshotHelperModifyFilename =
+        screenshotHelperModifyFilename.value =
-            !state.screenshotHelperModifyFilename;
+            !screenshotHelperModifyFilename.value;
         await configRepository.setBool(
             'VRCX_screenshotHelperModifyFilename',
-            state.screenshotHelperModifyFilename
+            screenshotHelperModifyFilename.value
         );
     }
     async function setScreenshotHelperCopyToClipboard() {
-        state.screenshotHelperCopyToClipboard =
+        screenshotHelperCopyToClipboard.value =
-            !state.screenshotHelperCopyToClipboard;
+            !screenshotHelperCopyToClipboard.value;
         await configRepository.setBool(
             'VRCX_screenshotHelperCopyToClipboard',
-            state.screenshotHelperCopyToClipboard
+            screenshotHelperCopyToClipboard.value
         );
     }
     async function setYouTubeApi() {
-        state.youTubeApi = !state.youTubeApi;
+        youTubeApi.value = !youTubeApi.value;
-        await configRepository.setBool('VRCX_youtubeAPI', state.youTubeApi);
+        await configRepository.setBool('VRCX_youtubeAPI', youTubeApi.value);
     }
     /**
      * @param {string} value
      */
     async function setYouTubeApiKey(value) {
-        state.youTubeApiKey = value;
+        youTubeApiKey.value = value;
         await configRepository.setString(
             'VRCX_youtubeAPIKey',
-            state.youTubeApiKey
+            youTubeApiKey.value
         );
     }
     async function setProgressPie() {
-        state.progressPie = !state.progressPie;
+        progressPie.value = !progressPie.value;
-        await configRepository.setBool('VRCX_progressPie', state.progressPie);
+        await configRepository.setBool('VRCX_progressPie', progressPie.value);
     }
     async function setProgressPieFilter() {
-        state.progressPieFilter = !state.progressPieFilter;
+        progressPieFilter.value = !progressPieFilter.value;
         await configRepository.setBool(
             'VRCX_progressPieFilter',
-            state.progressPieFilter
+            progressPieFilter.value
         );
     }
     async function setShowConfirmationOnSwitchAvatar() {
-        state.showConfirmationOnSwitchAvatar =
+        showConfirmationOnSwitchAvatar.value =
-            !state.showConfirmationOnSwitchAvatar;
+            !showConfirmationOnSwitchAvatar.value;
         await configRepository.setBool(
             'VRCX_showConfirmationOnSwitchAvatar',
-            state.showConfirmationOnSwitchAvatar
+            showConfirmationOnSwitchAvatar.value
         );
     }
     async function setGameLogDisabled() {
-        state.gameLogDisabled = !state.gameLogDisabled;
+        gameLogDisabled.value = !gameLogDisabled.value;
         await configRepository.setBool(
             'VRCX_gameLogDisabled',
-            state.gameLogDisabled
+            gameLogDisabled.value
         );
     }
 
     async function setSaveInstanceEmoji() {
-        state.saveInstanceEmoji = !state.saveInstanceEmoji;
+        saveInstanceEmoji.value = !saveInstanceEmoji.value;
         await configRepository.setBool(
             'VRCX_saveInstanceEmoji',
-            state.saveInstanceEmoji
+            saveInstanceEmoji.value
         );
     }
 
@@ -405,36 +346,36 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
         if (typeof path !== 'string') {
             path = '';
         }
-        state.ugcFolderPath = path;
+        ugcFolderPath.value = path;
         await configRepository.setString('VRCX_userGeneratedContentPath', path);
     }
 
     async function setAutoDeleteOldPrints() {
-        state.autoDeleteOldPrints = !state.autoDeleteOldPrints;
+        autoDeleteOldPrints.value = !autoDeleteOldPrints.value;
         await configRepository.setBool(
             'VRCX_autoDeleteOldPrints',
-            state.autoDeleteOldPrints
+            autoDeleteOldPrints.value
         );
     }
 
     async function setNotificationOpacity(value) {
-        state.notificationOpacity = value;
+        notificationOpacity.value = value;
         await configRepository.setInt('VRCX_notificationOpacity', value);
     }
 
     async function setVrcRegistryAutoBackup() {
-        state.vrcRegistryAutoBackup = !state.vrcRegistryAutoBackup;
+        vrcRegistryAutoBackup.value = !vrcRegistryAutoBackup.value;
         await configRepository.setBool(
             'VRCX_vrcRegistryAutoBackup',
-            state.vrcRegistryAutoBackup
+            vrcRegistryAutoBackup.value
         );
     }
 
     async function setVrcRegistryAskRestore() {
-        state.vrcRegistryAskRestore = !state.vrcRegistryAskRestore;
+        vrcRegistryAskRestore.value = !vrcRegistryAskRestore.value;
         await configRepository.setBool(
             'VRCX_vrcRegistryAskRestore',
-            state.vrcRegistryAskRestore
+            vrcRegistryAskRestore.value
         );
     }
 
@@ -456,7 +397,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
             }
         )
             .then(() => {
-                state.sentryErrorReporting = true;
+                sentryErrorReporting.value = true;
                 configRepository.setString('VRCX_SentryEnabled', 'true');
 
                 ElMessageBox.confirm(
@@ -478,7 +419,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
                 const act =
                     typeof action === 'string' ? action : action?.action;
                 if (act === 'cancel') {
-                    state.sentryErrorReporting = false;
+                    sentryErrorReporting.value = false;
                     configRepository.setString('VRCX_SentryEnabled', 'false');
                 }
             });
@@ -489,10 +430,10 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
             return;
         }
 
-        state.sentryErrorReporting = !state.sentryErrorReporting;
+        sentryErrorReporting.value = !sentryErrorReporting.value;
         await configRepository.setString(
             'VRCX_SentryEnabled',
-            state.sentryErrorReporting ? 'true' : 'false'
+            sentryErrorReporting.value ? 'true' : 'false'
         );
 
         ElMessageBox.confirm(
@@ -542,7 +483,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
             database.getExternalTableSize()
         ]);
 
-        state.sqliteTableSizes = {
+        sqliteTableSizes.value = {
             gps,
             status,
             bio,
@@ -561,9 +502,9 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
 
     function handleSetAppLauncherSettings() {
         AppApi.SetAppLauncherSettings(
-            state.enableAppLauncher,
+            enableAppLauncher.value,
-            state.enableAppLauncherAutoClose,
+            enableAppLauncherAutoClose.value,
-            state.enableAppLauncherRunProcessOnce
+            enableAppLauncherRunProcessOnce.value
         );
     }
 
@@ -571,14 +512,14 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
      * @param {string} videoId
      */
     async function lookupYouTubeVideo(videoId) {
-        if (!state.youTubeApi) {
+        if (!youTubeApi.value) {
             console.warn('no Youtube API key configured');
             return null;
         }
         let data = null;
         let apiKey = '';
-        if (state.youTubeApiKey) {
+        if (youTubeApiKey.value) {
-            apiKey = state.youTubeApiKey;
+            apiKey = youTubeApiKey.value;
         }
         try {
             const response = await webApiService.execute({
@@ -606,7 +547,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
     }
 
     function cropPrintsChanged() {
-        if (!state.cropInstancePrints) return;
+        if (!cropInstancePrints.value) return;
         ElMessageBox.confirm(
             t(
                 'view.settings.advanced.advanced.save_instance_prints_to_file.crop_convert_old'
@@ -629,7 +570,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
                     duration: 0
                 });
                 try {
-                    await AppApi.CropAllPrints(state.ugcFolderPath);
+                    await AppApi.CropAllPrints(ugcFolderPath.value);
                     ElMessage({
                         message: 'Batch print cropping complete',
                         type: 'success'
@@ -715,10 +656,10 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
     }
 
     async function openUGCFolder() {
-        if (LINUX && state.ugcFolderPath == null) {
+        if (LINUX && ugcFolderPath.value == null) {
             resetUGCFolder();
         }
-        await AppApi.OpenUGCPhotosFolder(state.ugcFolderPath);
+        await AppApi.OpenUGCPhotosFolder(ugcFolderPath.value);
     }
 
     async function folderSelectorDialog(oldPath) {
@@ -740,12 +681,12 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
     }
 
     async function openUGCFolderSelector() {
-        const path = await folderSelectorDialog(state.ugcFolderPath);
+        const path = await folderSelectorDialog(ugcFolderPath.value);
         await setUGCFolderPath(path);
     }
 
     async function showVRChatConfig() {
-        state.isVRChatConfigDialogVisible = true;
+        isVRChatConfigDialogVisible.value = true;
         if (!gameStore.VRChatUsedCacheSize) {
             gameStore.getVRChatCacheSize();
         }

src/stores/settings/appearance.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ElMessageBox } from 'element-plus';
 
@@ -41,35 +41,34 @@ export const useAppearanceSettingsStore = defineStore(
 
         const { t, availableLocales, locale } = useI18n();
 
-        const state = reactive({
+        const appLanguage = ref('en');
-            appLanguage: 'en',
+        const themeMode = ref('');
-            themeMode: '',
+        const isDarkMode = ref(false);
-            isDarkMode: false,
+        const displayVRCPlusIconsAsAvatar = ref(false);
-            displayVRCPlusIconsAsAvatar: false,
+        const hideNicknames = ref(false);
-            hideNicknames: false,
+        const isAgeGatedInstancesVisible = ref(false);
-            isAgeGatedInstancesVisible: false,
+        const sortFavorites = ref(true);
-            sortFavorites: true,
+        const instanceUsersSortAlphabetical = ref(false);
-            instanceUsersSortAlphabetical: false,
+        const tablePageSize = ref(15);
-            tablePageSize: 15,
+        const dtHour12 = ref(false);
-            dtHour12: false,
+        const dtIsoFormat = ref(false);
-            dtIsoFormat: false,
+        const sidebarSortMethod1 = ref('Sort Private to Bottom');
-            sidebarSortMethod1: 'Sort Private to Bottom',
+        const sidebarSortMethod2 = ref('Sort by Time in Instance');
-            sidebarSortMethod2: 'Sort by Time in Instance',
+        const sidebarSortMethod3 = ref('Sort by Last Active');
-            sidebarSortMethod3: 'Sort by Last Active',
+        const sidebarSortMethods = ref([
-            sidebarSortMethods: [
             'Sort Private to Bottom',
             'Sort by Time in Instance',
             'Sort by Last Active'
-            ],
+        ]);
-            asideWidth: 300,
+        const asideWidth = ref(300);
-            isSidebarGroupByInstance: true,
+        const isSidebarGroupByInstance = ref(true);
-            isHideFriendsInSameInstance: false,
+        const isHideFriendsInSameInstance = ref(false);
-            isSidebarDivideByFriendGroup: false,
+        const isSidebarDivideByFriendGroup = ref(false);
-            hideUserNotes: false,
+        const hideUserNotes = ref(false);
-            hideUserMemos: false,
+        const hideUserMemos = ref(false);
-            hideUnfriends: false,
+        const hideUnfriends = ref(false);
-            randomUserColours: false,
+        const randomUserColours = ref(false);
-            trustColor: {
+        const trustColor = ref({
             untrusted: '#CCCCCC',
             basic: '#1778FF',
             known: '#2BCF5C',
@@ -77,32 +76,37 @@ export const useAppearanceSettingsStore = defineStore(
             veteran: '#B18FFF',
             vip: '#FF2626',
             troll: '#782F2F'
-            },
+        });
-            currentCulture: ''
+        const currentCulture = ref('');
+        const isSideBarTabShow = computed(() => {
+            return !(
+                uiStore.menuActiveIndex === 'friendList' ||
+                uiStore.menuActiveIndex === 'charts'
+            );
         });
 
         async function initAppearanceSettings() {
             const [
-                appLanguage,
+                appLanguageConfig,
-                themeMode,
+                themeModeConfig,
-                displayVRCPlusIconsAsAvatar,
+                displayVRCPlusIconsAsAvatarConfig,
-                hideNicknames,
+                hideNicknamesConfig,
-                isAgeGatedInstancesVisible,
+                isAgeGatedInstancesVisibleConfig,
-                sortFavorites,
+                sortFavoritesConfig,
-                instanceUsersSortAlphabetical,
+                instanceUsersSortAlphabeticalConfig,
-                tablePageSize,
+                tablePageSizeConfig,
-                dtHour12,
+                dtHour12Config,
-                dtIsoFormat,
+                dtIsoFormatConfig,
-                sidebarSortMethods,
+                sidebarSortMethodsConfig,
-                asideWidth,
+                asideWidthConfig,
-                isSidebarGroupByInstance,
+                isSidebarGroupByInstanceConfig,
-                isHideFriendsInSameInstance,
+                isHideFriendsInSameInstanceConfig,
-                isSidebarDivideByFriendGroup,
+                isSidebarDivideByFriendGroupConfig,
-                hideUserNotes,
+                hideUserNotesConfig,
-                hideUserMemos,
+                hideUserMemosConfig,
-                hideUnfriends,
+                hideUnfriendsConfig,
-                randomUserColours,
+                randomUserColoursConfig,
-                trustColor
+                trustColorConfig
             ] = await Promise.all([
                 configRepository.getString('VRCX_appLanguage'),
                 configRepository.getString('VRCX_ThemeMode', 'system'),
@@ -156,7 +160,7 @@ export const useAppearanceSettingsStore = defineStore(
                 )
             ]);
 
-            if (!appLanguage) {
+            if (!appLanguageConfig) {
                 const result = await AppApi.CurrentLanguage();
 
                 const lang = result.split('-')[0];
@@ -167,98 +171,58 @@ export const useAppearanceSettingsStore = defineStore(
                     }
                 });
             } else {
-                changeAppLanguage(appLanguage);
+                changeAppLanguage(appLanguageConfig);
             }
 
-            state.themeMode = themeMode;
+            themeMode.value = themeModeConfig;
             applyThemeMode();
 
-            state.displayVRCPlusIconsAsAvatar = displayVRCPlusIconsAsAvatar;
+            displayVRCPlusIconsAsAvatar.value =
-            state.hideNicknames = hideNicknames;
+                displayVRCPlusIconsAsAvatarConfig;
-            state.isAgeGatedInstancesVisible = isAgeGatedInstancesVisible;
+            hideNicknames.value = hideNicknamesConfig;
-            state.sortFavorites = sortFavorites;
+            isAgeGatedInstancesVisible.value = isAgeGatedInstancesVisibleConfig;
-            state.instanceUsersSortAlphabetical = instanceUsersSortAlphabetical;
+            sortFavorites.value = sortFavoritesConfig;
+            instanceUsersSortAlphabetical.value =
+                instanceUsersSortAlphabeticalConfig;
 
-            setTablePageSize(tablePageSize);
+            setTablePageSize(tablePageSizeConfig);
-            handleSetTablePageSize(state.tablePageSize);
+            handleSetTablePageSize(tablePageSize.value);
 
-            state.dtHour12 = dtHour12;
+            dtHour12.value = dtHour12Config;
-            state.dtIsoFormat = dtIsoFormat;
+            dtIsoFormat.value = dtIsoFormatConfig;
 
-            state.currentCulture = await AppApi.CurrentCulture();
+            currentCulture.value = await AppApi.CurrentCulture();
 
-            state.sidebarSortMethods = JSON.parse(sidebarSortMethods);
+            sidebarSortMethods.value = JSON.parse(sidebarSortMethodsConfig);
-            if (state.sidebarSortMethods?.length === 3) {
+            if (sidebarSortMethods.value?.length === 3) {
-                state.sidebarSortMethod1 = state.sidebarSortMethods[0];
+                sidebarSortMethod1.value = sidebarSortMethods.value[0];
-                state.sidebarSortMethod2 = state.sidebarSortMethods[1];
+                sidebarSortMethod2.value = sidebarSortMethods.value[1];
-                state.sidebarSortMethod3 = state.sidebarSortMethods[2];
+                sidebarSortMethod3.value = sidebarSortMethods.value[2];
             }
 
-            state.trustColor = JSON.parse(trustColor);
+            trustColor.value = JSON.parse(trustColorConfig);
-            state.asideWidth = asideWidth;
+            asideWidth.value = asideWidthConfig;
-            state.isSidebarGroupByInstance = isSidebarGroupByInstance;
+            isSidebarGroupByInstance.value = isSidebarGroupByInstanceConfig;
-            state.isHideFriendsInSameInstance = isHideFriendsInSameInstance;
+            isHideFriendsInSameInstance.value =
-            state.isSidebarDivideByFriendGroup = isSidebarDivideByFriendGroup;
+                isHideFriendsInSameInstanceConfig;
-            state.hideUserNotes = hideUserNotes;
+            isSidebarDivideByFriendGroup.value =
-            state.hideUserMemos = hideUserMemos;
+                isSidebarDivideByFriendGroupConfig;
-            state.hideUnfriends = hideUnfriends;
+            hideUserNotes.value = hideUserNotesConfig;
-            state.randomUserColours = randomUserColours;
+            hideUserMemos.value = hideUserMemosConfig;
+            hideUnfriends.value = hideUnfriendsConfig;
+            randomUserColours.value = randomUserColoursConfig;
 
             // Migrate old settings
             // Assume all exist if one does
             await mergeOldSortMethodsSettings();
 
-            updateTrustColorClasses(state.trustColor);
+            updateTrustColorClasses(trustColor.value);
 
             vrStore.updateVRConfigVars();
         }
 
         initAppearanceSettings();
 
-        const appLanguage = computed(() => state.appLanguage);
-        const themeMode = computed(() => state.themeMode);
-        const isDarkMode = computed(() => state.isDarkMode);
-        const displayVRCPlusIconsAsAvatar = computed(
-            () => state.displayVRCPlusIconsAsAvatar
-        );
-        const hideNicknames = computed(() => state.hideNicknames);
-        const isAgeGatedInstancesVisible = computed(
-            () => state.isAgeGatedInstancesVisible
-        );
-        const sortFavorites = computed(() => state.sortFavorites);
-        const instanceUsersSortAlphabetical = computed(
-            () => state.instanceUsersSortAlphabetical
-        );
-        const tablePageSize = computed(() => state.tablePageSize);
-        const dtHour12 = computed(() => state.dtHour12);
-        const dtIsoFormat = computed(() => state.dtIsoFormat);
-        const sidebarSortMethod1 = computed(() => state.sidebarSortMethod1);
-        const sidebarSortMethod2 = computed(() => state.sidebarSortMethod2);
-        const sidebarSortMethod3 = computed(() => state.sidebarSortMethod3);
-        const sidebarSortMethods = computed(() => state.sidebarSortMethods);
-        const asideWidth = computed(() => state.asideWidth);
-        const isSidebarGroupByInstance = computed(
-            () => state.isSidebarGroupByInstance
-        );
-        const isHideFriendsInSameInstance = computed(
-            () => state.isHideFriendsInSameInstance
-        );
-        const isSidebarDivideByFriendGroup = computed(
-            () => state.isSidebarDivideByFriendGroup
-        );
-        const hideUserNotes = computed(() => state.hideUserNotes);
-        const hideUserMemos = computed(() => state.hideUserMemos);
-        const hideUnfriends = computed(() => state.hideUnfriends);
-        const randomUserColours = computed(() => state.randomUserColours);
-        const trustColor = computed(() => state.trustColor);
-        const currentCulture = computed(() => state.currentCulture);
-        const isSideBarTabShow = computed(() => {
-            return !(
-                uiStore.menuActiveIndex === 'friendList' ||
-                uiStore.menuActiveIndex === 'charts'
-            );
-        });
-
         watch(
             () => watchState.isFriendsLoaded,
             (isFriendsLoaded) => {
@@ -283,9 +247,9 @@ export const useAppearanceSettingsStore = defineStore(
          */
         function setAppLanguage(language) {
             console.log('Language changed:', language);
-            state.appLanguage = language;
+            appLanguage.value = language;
             configRepository.setString('VRCX_appLanguage', language);
-            locale.value = state.appLanguage;
+            locale.value = appLanguage.value;
             changeHtmlLangAttribute(language);
         }
 
@@ -299,7 +263,7 @@ export const useAppearanceSettingsStore = defineStore(
         }
 
         async function changeThemeMode() {
-            await changeAppThemeStyle(state.themeMode);
+            await changeAppThemeStyle(themeMode.value);
             vrStore.updateVRConfigVars();
             await updateTrustColor(undefined, undefined);
         }
@@ -320,11 +284,11 @@ export const useAppearanceSettingsStore = defineStore(
             }
             if (field && color) {
                 setTrustColor({
-                    ...state.trustColor,
+                    ...trustColor.value,
                     [field]: color
                 });
             }
-            if (state.randomUserColours) {
+            if (randomUserColours.value) {
                 const colour = await getNameColour(userStore.currentUser.id);
                 userStore.currentUser.$userColour = colour;
                 userColourInit();
@@ -334,7 +298,7 @@ export const useAppearanceSettingsStore = defineStore(
                     applyUserTrustLevel(ref);
                 });
             }
-            updateTrustColorClasses(state.trustColor);
+            updateTrustColorClasses(trustColor.value);
         }
 
         async function userColourInit() {
@@ -362,7 +326,7 @@ export const useAppearanceSettingsStore = defineStore(
                 ref.developerType && ref.developerType !== 'none';
             ref.$isTroll = false;
             ref.$isProbableTroll = false;
-            let trustColor = '';
+            let trustColorTemp = '';
             const { tags } = ref;
             if (tags.includes('admin_moderator')) {
                 ref.$isModerator = true;
@@ -376,52 +340,52 @@ export const useAppearanceSettingsStore = defineStore(
             if (tags.includes('system_trust_veteran')) {
                 ref.$trustLevel = 'Trusted User';
                 ref.$trustClass = 'x-tag-veteran';
-                trustColor = 'veteran';
+                trustColorTemp = 'veteran';
                 ref.$trustSortNum = 5;
             } else if (tags.includes('system_trust_trusted')) {
                 ref.$trustLevel = 'Known User';
                 ref.$trustClass = 'x-tag-trusted';
-                trustColor = 'trusted';
+                trustColorTemp = 'trusted';
                 ref.$trustSortNum = 4;
             } else if (tags.includes('system_trust_known')) {
                 ref.$trustLevel = 'User';
                 ref.$trustClass = 'x-tag-known';
-                trustColor = 'known';
+                trustColorTemp = 'known';
                 ref.$trustSortNum = 3;
             } else if (tags.includes('system_trust_basic')) {
                 ref.$trustLevel = 'New User';
                 ref.$trustClass = 'x-tag-basic';
-                trustColor = 'basic';
+                trustColorTemp = 'basic';
                 ref.$trustSortNum = 2;
             } else {
                 ref.$trustLevel = 'Visitor';
                 ref.$trustClass = 'x-tag-untrusted';
-                trustColor = 'untrusted';
+                trustColorTemp = 'untrusted';
                 ref.$trustSortNum = 1;
             }
             if (ref.$isTroll || ref.$isProbableTroll) {
-                trustColor = 'troll';
+                trustColorTemp = 'troll';
                 ref.$trustSortNum += 0.1;
             }
             if (ref.$isModerator) {
-                trustColor = 'vip';
+                trustColorTemp = 'vip';
                 ref.$trustSortNum += 0.3;
             }
-            if (state.randomUserColours && watchState.isFriendsLoaded) {
+            if (randomUserColours.value && watchState.isFriendsLoaded) {
                 if (!ref.$userColour) {
                     getNameColour(ref.id).then((colour) => {
                         ref.$userColour = colour;
                     });
                 }
             } else {
-                ref.$userColour = state.trustColor[trustColor];
+                ref.$userColour = trustColor.value[trustColorTemp];
             }
         }
 
         window
             .matchMedia('(prefers-color-scheme: dark)')
             .addEventListener('change', async () => {
-                if (state.themeMode === 'system') {
+                if (themeMode.value === 'system') {
                     await changeThemeMode();
                 }
             });
@@ -430,14 +394,14 @@ export const useAppearanceSettingsStore = defineStore(
          * @param {string} mode
          */
         function setThemeMode(mode) {
-            state.themeMode = mode;
+            themeMode.value = mode;
             configRepository.setString('VRCX_ThemeMode', mode);
             applyThemeMode();
         }
         function applyThemeMode() {
-            if (state.themeMode === 'light') {
+            if (themeMode.value === 'light') {
                 setIsDarkMode(false);
-            } else if (state.themeMode === 'system') {
+            } else if (themeMode.value === 'system') {
                 setIsDarkMode(systemIsDarkMode());
             } else {
                 setIsDarkMode(true);
@@ -447,82 +411,82 @@ export const useAppearanceSettingsStore = defineStore(
          * @param {boolean} isDark
          */
         function setIsDarkMode(isDark) {
-            state.isDarkMode = isDark;
+            isDarkMode.value = isDark;
             changeAppDarkStyle(isDark);
         }
         function setDisplayVRCPlusIconsAsAvatar() {
-            state.displayVRCPlusIconsAsAvatar =
+            displayVRCPlusIconsAsAvatar.value =
-                !state.displayVRCPlusIconsAsAvatar;
+                !displayVRCPlusIconsAsAvatar.value;
             configRepository.setBool(
                 'displayVRCPlusIconsAsAvatar',
-                state.displayVRCPlusIconsAsAvatar
+                displayVRCPlusIconsAsAvatar.value
             );
         }
         function setHideNicknames() {
-            state.hideNicknames = !state.hideNicknames;
+            hideNicknames.value = !hideNicknames.value;
-            configRepository.setBool('VRCX_hideNicknames', state.hideNicknames);
+            configRepository.setBool('VRCX_hideNicknames', hideNicknames.value);
         }
         function setIsAgeGatedInstancesVisible() {
-            state.isAgeGatedInstancesVisible =
+            isAgeGatedInstancesVisible.value =
-                !state.isAgeGatedInstancesVisible;
+                !isAgeGatedInstancesVisible.value;
             configRepository.setBool(
                 'VRCX_isAgeGatedInstancesVisible',
-                state.isAgeGatedInstancesVisible
+                isAgeGatedInstancesVisible.value
             );
         }
         function setSortFavorites() {
-            state.sortFavorites = !state.sortFavorites;
+            sortFavorites.value = !sortFavorites.value;
-            configRepository.setBool('VRCX_sortFavorites', state.sortFavorites);
+            configRepository.setBool('VRCX_sortFavorites', sortFavorites.value);
         }
         function setInstanceUsersSortAlphabetical() {
-            state.instanceUsersSortAlphabetical =
+            instanceUsersSortAlphabetical.value =
-                !state.instanceUsersSortAlphabetical;
+                !instanceUsersSortAlphabetical.value;
             configRepository.setBool(
                 'VRCX_instanceUsersSortAlphabetical',
-                state.instanceUsersSortAlphabetical
+                instanceUsersSortAlphabetical.value
             );
         }
         /**
          * @param {number} size
          */
         function setTablePageSize(size) {
-            state.tablePageSize = size;
+            tablePageSize.value = size;
             configRepository.setInt('VRCX_tablePageSize', size);
         }
         function setDtHour12() {
-            state.dtHour12 = !state.dtHour12;
+            dtHour12.value = !dtHour12.value;
-            configRepository.setBool('VRCX_dtHour12', state.dtHour12);
+            configRepository.setBool('VRCX_dtHour12', dtHour12.value);
         }
         function setDtIsoFormat() {
-            state.dtIsoFormat = !state.dtIsoFormat;
+            dtIsoFormat.value = !dtIsoFormat.value;
-            configRepository.setBool('VRCX_dtIsoFormat', state.dtIsoFormat);
+            configRepository.setBool('VRCX_dtIsoFormat', dtIsoFormat.value);
         }
         /**
          * @param {string} method
          */
         function setSidebarSortMethod1(method) {
-            state.sidebarSortMethod1 = method;
+            sidebarSortMethod1.value = method;
             handleSaveSidebarSortOrder();
         }
         /**
          * @param {string} method
          */
         function setSidebarSortMethod2(method) {
-            state.sidebarSortMethod2 = method;
+            sidebarSortMethod2.value = method;
             handleSaveSidebarSortOrder();
         }
         /**
          * @param {string} method
          */
         function setSidebarSortMethod3(method) {
-            state.sidebarSortMethod3 = method;
+            sidebarSortMethod3.value = method;
             handleSaveSidebarSortOrder();
         }
         /**
          * @param {Array<string>} methods
          */
         function setSidebarSortMethods(methods) {
-            state.sidebarSortMethods = methods;
+            sidebarSortMethods.value = methods;
             configRepository.setString(
                 'VRCX_sidebarSortMethods',
                 JSON.stringify(methods)
@@ -535,7 +499,7 @@ export const useAppearanceSettingsStore = defineStore(
         function setAsideWidth(panelNumber, widthArray) {
             if (Array.isArray(widthArray) && widthArray[1]) {
                 requestAnimationFrame(() => {
-                    state.asideWidth = widthArray[1];
+                    asideWidth.value = widthArray[1];
                     configRepository.setInt(
                         'VRCX_sidePanelWidth',
                         widthArray[1]
@@ -544,52 +508,52 @@ export const useAppearanceSettingsStore = defineStore(
             }
         }
         function setIsSidebarGroupByInstance() {
-            state.isSidebarGroupByInstance = !state.isSidebarGroupByInstance;
+            isSidebarGroupByInstance.value = !isSidebarGroupByInstance.value;
             configRepository.setBool(
                 'VRCX_sidebarGroupByInstance',
-                state.isSidebarGroupByInstance
+                isSidebarGroupByInstance.value
             );
         }
         function setIsHideFriendsInSameInstance() {
-            state.isHideFriendsInSameInstance =
+            isHideFriendsInSameInstance.value =
-                !state.isHideFriendsInSameInstance;
+                !isHideFriendsInSameInstance.value;
             configRepository.setBool(
                 'VRCX_hideFriendsInSameInstance',
-                state.isHideFriendsInSameInstance
+                isHideFriendsInSameInstance.value
             );
         }
         function setIsSidebarDivideByFriendGroup() {
-            state.isSidebarDivideByFriendGroup =
+            isSidebarDivideByFriendGroup.value =
-                !state.isSidebarDivideByFriendGroup;
+                !isSidebarDivideByFriendGroup.value;
             configRepository.setBool(
                 'VRCX_sidebarDivideByFriendGroup',
-                state.isSidebarDivideByFriendGroup
+                isSidebarDivideByFriendGroup.value
             );
         }
         function setHideUserNotes() {
-            state.hideUserNotes = !state.hideUserNotes;
+            hideUserNotes.value = !hideUserNotes.value;
-            configRepository.setBool('VRCX_hideUserNotes', state.hideUserNotes);
+            configRepository.setBool('VRCX_hideUserNotes', hideUserNotes.value);
         }
         function setHideUserMemos() {
-            state.hideUserMemos = !state.hideUserMemos;
+            hideUserMemos.value = !hideUserMemos.value;
-            configRepository.setBool('VRCX_hideUserMemos', state.hideUserMemos);
+            configRepository.setBool('VRCX_hideUserMemos', hideUserMemos.value);
         }
         function setHideUnfriends() {
-            state.hideUnfriends = !state.hideUnfriends;
+            hideUnfriends.value = !hideUnfriends.value;
-            configRepository.setBool('VRCX_hideUnfriends', state.hideUnfriends);
+            configRepository.setBool('VRCX_hideUnfriends', hideUnfriends.value);
         }
         function setRandomUserColours() {
-            state.randomUserColours = !state.randomUserColours;
+            randomUserColours.value = !randomUserColours.value;
             configRepository.setBool(
                 'VRCX_randomUserColours',
-                state.randomUserColours
+                randomUserColours.value
             );
         }
         /**
          * @param {object} color
          */
         function setTrustColor(color) {
-            state.trustColor = color;
+            trustColor.value = color;
             configRepository.setString(
                 'VRCX_trustColor',
                 JSON.stringify(color)
@@ -597,25 +561,25 @@ export const useAppearanceSettingsStore = defineStore(
         }
 
         function handleSaveSidebarSortOrder() {
-            if (state.sidebarSortMethod1 === state.sidebarSortMethod2) {
+            if (sidebarSortMethod1.value === sidebarSortMethod2.value) {
-                state.sidebarSortMethod2 = '';
+                sidebarSortMethod2.value = '';
             }
-            if (state.sidebarSortMethod1 === state.sidebarSortMethod3) {
+            if (sidebarSortMethod1.value === sidebarSortMethod3.value) {
-                state.sidebarSortMethod3 = '';
+                sidebarSortMethod3.value = '';
             }
-            if (state.sidebarSortMethod2 === state.sidebarSortMethod3) {
+            if (sidebarSortMethod2.value === sidebarSortMethod3.value) {
-                state.sidebarSortMethod3 = '';
+                sidebarSortMethod3.value = '';
             }
-            if (!state.sidebarSortMethod1) {
+            if (!sidebarSortMethod1.value) {
-                state.sidebarSortMethod2 = '';
+                sidebarSortMethod2.value = '';
             }
-            if (!state.sidebarSortMethod2) {
+            if (!sidebarSortMethod2.value) {
-                state.sidebarSortMethod3 = '';
+                sidebarSortMethod3.value = '';
             }
             const sidebarSortMethods = [
-                state.sidebarSortMethod1,
+                sidebarSortMethod1.value,
-                state.sidebarSortMethod2,
+                sidebarSortMethod2.value,
-                state.sidebarSortMethod3
+                sidebarSortMethod3.value
             ];
             setSidebarSortMethods(sidebarSortMethods);
         }
@@ -662,10 +626,10 @@ export const useAppearanceSettingsStore = defineStore(
                     while (sortOrder.length < 3) {
                         sortOrder.push('');
                     }
-                    state.sidebarSortMethods = sortOrder;
+                    sidebarSortMethods.value = sortOrder;
-                    state.sidebarSortMethod1 = sortOrder[0];
+                    sidebarSortMethod1.value = sortOrder[0];
-                    state.sidebarSortMethod2 = sortOrder[1];
+                    sidebarSortMethod2.value = sortOrder[1];
-                    state.sidebarSortMethod3 = sortOrder[2];
+                    sidebarSortMethod3.value = sortOrder[2];
                 }
                 setSidebarSortMethods(sortOrder);
             }
@@ -713,7 +677,7 @@ export const useAppearanceSettingsStore = defineStore(
         }
 
         async function tryInitUserColours() {
-            if (!state.randomUserColours) {
+            if (!randomUserColours.value) {
                 return;
             }
             const colour = await getNameColour(userStore.currentUser.id);
@@ -722,8 +686,6 @@ export const useAppearanceSettingsStore = defineStore(
         }
 
         return {
-            state,
-
             appLanguage,
             themeMode,
             isDarkMode,

src/stores/settings/discordPresence.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive } from 'vue';
+import { ref, reactive } from 'vue';
 import { worldRequest } from '../../api';
 import configRepository from '../../service/config';
 import {
@@ -31,14 +31,6 @@ export const useDiscordPresenceSettingsStore = defineStore(
         const { t } = useI18n();
 
         const state = reactive({
-            discordActive: false,
-            discordInstance: true,
-            discordHideInvite: true,
-            discordJoinButton: false,
-            discordHideImage: false,
-            discordShowPlatform: true,
-            discordWorldIntegration: true,
-            discordWorldNameAsDiscordStatus: false,
             isDiscordActive: false,
             lastLocationDetails: {
                 tag: '',
@@ -56,16 +48,77 @@ export const useDiscordPresenceSettingsStore = defineStore(
             }
         });
 
+        const discordActive = ref(false);
+        const discordInstance = ref(true);
+        const discordHideInvite = ref(true);
+        const discordJoinButton = ref(false);
+        const discordHideImage = ref(false);
+        const discordShowPlatform = ref(true);
+        const discordWorldIntegration = ref(true);
+        const discordWorldNameAsDiscordStatus = ref(false);
+
+        function setDiscordActive() {
+            discordActive.value = !discordActive.value;
+            configRepository.setBool('discordActive', discordActive.value);
+        }
+        function setDiscordInstance() {
+            discordInstance.value = !discordInstance.value;
+            configRepository.setBool('discordInstance', discordInstance.value);
+        }
+        function setDiscordHideInvite() {
+            discordHideInvite.value = !discordHideInvite.value;
+            configRepository.setBool(
+                'discordHideInvite',
+                discordHideInvite.value
+            );
+        }
+        function setDiscordJoinButton() {
+            discordJoinButton.value = !discordJoinButton.value;
+            configRepository.setBool(
+                'discordJoinButton',
+                discordJoinButton.value
+            );
+        }
+        function setDiscordHideImage() {
+            discordHideImage.value = !discordHideImage.value;
+            configRepository.setBool(
+                'discordHideImage',
+                discordHideImage.value
+            );
+        }
+        function setDiscordShowPlatform() {
+            discordShowPlatform.value = !discordShowPlatform.value;
+            configRepository.setBool(
+                'discordShowPlatform',
+                discordShowPlatform.value
+            );
+        }
+        function setDiscordWorldIntegration() {
+            discordWorldIntegration.value = !discordWorldIntegration.value;
+            configRepository.setBool(
+                'discordWorldIntegration',
+                discordWorldIntegration.value
+            );
+        }
+        function setDiscordWorldNameAsDiscordStatus() {
+            discordWorldNameAsDiscordStatus.value =
+                !discordWorldNameAsDiscordStatus.value;
+            configRepository.setBool(
+                'discordWorldNameAsDiscordStatus',
+                discordWorldNameAsDiscordStatus.value
+            );
+        }
+
         async function initDiscordPresenceSettings() {
             const [
-                discordActive,
+                discordActiveConfig,
-                discordInstance,
+                discordInstanceConfig,
-                discordHideInvite,
+                discordHideInviteConfig,
-                discordJoinButton,
+                discordJoinButtonConfig,
-                discordHideImage,
+                discordHideImageConfig,
-                discordShowPlatform,
+                discordShowPlatformConfig,
-                discordWorldIntegration,
+                discordWorldIntegrationConfig,
-                discordWorldNameAsDiscordStatus
+                discordWorldNameAsDiscordStatusConfig
             ] = await Promise.all([
                 configRepository.getBool('discordActive', false),
                 configRepository.getBool('discordInstance', true),
@@ -80,80 +133,15 @@ export const useDiscordPresenceSettingsStore = defineStore(
                 )
             ]);
 
-            state.discordActive = discordActive;
+            discordActive.value = discordActiveConfig;
-            state.discordInstance = discordInstance;
+            discordInstance.value = discordInstanceConfig;
-            state.discordHideInvite = discordHideInvite;
+            discordHideInvite.value = discordHideInviteConfig;
-            state.discordJoinButton = discordJoinButton;
+            discordJoinButton.value = discordJoinButtonConfig;
-            state.discordHideImage = discordHideImage;
+            discordHideImage.value = discordHideImageConfig;
-            state.discordShowPlatform = discordShowPlatform;
+            discordShowPlatform.value = discordShowPlatformConfig;
-            state.discordWorldIntegration = discordWorldIntegration;
+            discordWorldIntegration.value = discordWorldIntegrationConfig;
-            state.discordWorldNameAsDiscordStatus =
+            discordWorldNameAsDiscordStatus.value =
-                discordWorldNameAsDiscordStatus;
+                discordWorldNameAsDiscordStatusConfig;
-        }
-
-        const discordActive = computed(() => state.discordActive);
-        const discordInstance = computed(() => state.discordInstance);
-        const discordHideInvite = computed(() => state.discordHideInvite);
-        const discordJoinButton = computed(() => state.discordJoinButton);
-        const discordHideImage = computed(() => state.discordHideImage);
-        const discordShowPlatform = computed(() => state.discordShowPlatform);
-        const discordWorldIntegration = computed(
-            () => state.discordWorldIntegration
-        );
-        const discordWorldNameAsDiscordStatus = computed(
-            () => state.discordWorldNameAsDiscordStatus
-        );
-
-        function setDiscordActive() {
-            state.discordActive = !state.discordActive;
-            configRepository.setBool('discordActive', state.discordActive);
-        }
-        function setDiscordInstance() {
-            state.discordInstance = !state.discordInstance;
-            configRepository.setBool('discordInstance', state.discordInstance);
-        }
-        function setDiscordHideInvite() {
-            state.discordHideInvite = !state.discordHideInvite;
-            configRepository.setBool(
-                'discordHideInvite',
-                state.discordHideInvite
-            );
-        }
-        function setDiscordJoinButton() {
-            state.discordJoinButton = !state.discordJoinButton;
-            configRepository.setBool(
-                'discordJoinButton',
-                state.discordJoinButton
-            );
-        }
-        function setDiscordHideImage() {
-            state.discordHideImage = !state.discordHideImage;
-            configRepository.setBool(
-                'discordHideImage',
-                state.discordHideImage
-            );
-        }
-        function setDiscordShowPlatform() {
-            state.discordShowPlatform = !state.discordShowPlatform;
-            configRepository.setBool(
-                'discordShowPlatform',
-                state.discordShowPlatform
-            );
-        }
-        function setDiscordWorldIntegration() {
-            state.discordWorldIntegration = !state.discordWorldIntegration;
-            configRepository.setBool(
-                'discordWorldIntegration',
-                state.discordWorldIntegration
-            );
-        }
-        function setDiscordWorldNameAsDiscordStatus() {
-            state.discordWorldNameAsDiscordStatus =
-                !state.discordWorldNameAsDiscordStatus;
-            configRepository.setBool(
-                'discordWorldNameAsDiscordStatus',
-                state.discordWorldNameAsDiscordStatus
-            );
         }
 
         initDiscordPresenceSettings();
@@ -174,7 +162,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
                         userStore.currentUser.$travelingToLocation;
                 }
             }
-            if (!state.discordActive || !isRealInstance(currentLocation)) {
+            if (!discordActive.value || !isRealInstance(currentLocation)) {
                 setIsDiscordActive(false);
                 return;
             }
@@ -213,7 +201,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
                 }
 
                 let platform = '';
-                if (state.discordShowPlatform) {
+                if (discordShowPlatform.value) {
                     if (gameStore.isGameRunning) {
                         platform = gameStore.isGameNoVR
                             ? ` (${t('view.settings.discord_presence.rpc.desktop')})`
@@ -284,7 +272,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
             setIsDiscordActive(true);
             let hidePrivate = false;
             if (
-                state.discordHideInvite &&
+                discordHideInvite.value &&
                 (state.lastLocationDetails.accessType === 'invite' ||
                     state.lastLocationDetails.accessType === 'invite+' ||
                     state.lastLocationDetails.groupAccessType === 'members')
@@ -305,7 +293,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
                 case 'ask me':
                     statusName = t('dialog.user.status.ask_me');
                     statusImage = 'askme';
-                    if (state.discordHideInvite) {
+                    if (discordHideInvite.value) {
                         hidePrivate = true;
                     }
                     break;
@@ -324,7 +312,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
             let stateText = state.lastLocationDetails.accessName;
             let endTime = 0;
             let activityType = ActivityType.Playing;
-            let statusDisplayType = state.discordWorldNameAsDiscordStatus
+            let statusDisplayType = discordWorldNameAsDiscordStatus.value
                 ? StatusDisplayType.Details
                 : StatusDisplayType.Name;
             let appId = '883308884863901717';
@@ -343,7 +331,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
             if (partySize === 0) {
                 partyMaxSize = 0;
             }
-            if (!state.discordInstance) {
+            if (!discordInstance.value) {
                 partySize = 0;
                 partyMaxSize = 0;
                 stateText = '';
@@ -352,14 +340,14 @@ export const useDiscordPresenceSettingsStore = defineStore(
                 'view.settings.discord_presence.rpc.join_button'
             );
             let buttonUrl = state.lastLocationDetails.joinUrl;
-            if (!state.discordJoinButton) {
+            if (!discordJoinButton.value) {
                 buttonText = '';
                 buttonUrl = '';
             }
 
             if (
                 isRpcWorld(state.lastLocationDetails.tag) &&
-                state.discordWorldIntegration
+                discordWorldIntegration.value
             ) {
                 // custom world rpc
                 if (
@@ -418,7 +406,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
                     statusDisplayType = StatusDisplayType.Details;
                     appId = '1095440531821170820';
                     if (
-                        !state.discordHideImage &&
+                        !discordHideImage.value &&
                         gameLogStore.nowPlaying.thumbnailUrl
                     ) {
                         bigIcon = gameLogStore.nowPlaying.thumbnailUrl;
@@ -437,7 +425,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
                         1000;
                 }
             } else if (
-                !state.discordHideImage &&
+                !discordHideImage.value &&
                 state.lastLocationDetails.thumbnailImageUrl
             ) {
                 bigIcon = state.lastLocationDetails.thumbnailImageUrl;

src/stores/settings/general.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive } from 'vue';
+import { ref } from 'vue';
 import * as workerTimers from 'worker-timers';
 import { ElMessageBox } from 'element-plus';
 
@@ -15,42 +15,41 @@ export const useGeneralSettingsStore = defineStore('GeneralSettings', () => {
     const friendStore = useFriendStore();
 
     const { t } = useI18n();
-    const state = reactive({
+
-        isStartAtWindowsStartup: false,
+    const isStartAtWindowsStartup = ref(false);
-        isStartAsMinimizedState: false,
+    const isStartAsMinimizedState = ref(false);
-        isCloseToTray: false,
+    const disableGpuAcceleration = ref(false);
-        disableGpuAcceleration: false,
+    const isCloseToTray = ref(false);
-        disableVrOverlayGpuAcceleration: false,
+    const disableVrOverlayGpuAcceleration = ref(false);
-        localFavoriteFriendsGroups: [],
+    const localFavoriteFriendsGroups = ref([]);
-        udonExceptionLogging: false,
+    const udonExceptionLogging = ref(false);
-        logResourceLoad: false,
+    const logResourceLoad = ref(false);
-        logEmptyAvatars: false,
+    const logEmptyAvatars = ref(false);
-        autoStateChangeEnabled: false,
+    const autoStateChangeEnabled = ref(false);
-        autoStateChangeAloneStatus: 'join me',
+    const autoStateChangeAloneStatus = ref('join me');
-        autoStateChangeCompanyStatus: 'busy',
+    const autoStateChangeCompanyStatus = ref('busy');
-        autoStateChangeInstanceTypes: [],
+    const autoStateChangeInstanceTypes = ref([]);
-        autoStateChangeNoFriends: false,
+    const autoStateChangeNoFriends = ref(false);
-        autoAcceptInviteRequests: 'Off'
+    const autoAcceptInviteRequests = ref('Off');
-    });
 
     async function initGeneralSettings() {
         const [
-            isStartAtWindowsStartup,
+            isStartAtWindowsStartupConfig,
-            isStartAsMinimizedState,
+            isStartAsMinimizedStateConfig,
-            isCloseToTray,
+            isCloseToTrayConfig,
-            isCloseToTrayConfigBool,
+            isCloseToTrayConfigBoolConfig,
-            disableGpuAccelerationStr,
+            disableGpuAccelerationStrConfig,
-            disableVrOverlayGpuAccelerationStr,
+            disableVrOverlayGpuAccelerationStrConfig,
-            localFavoriteFriendsGroupsStr,
+            localFavoriteFriendsGroupsStrConfig,
-            udonExceptionLogging,
+            udonExceptionLoggingConfig,
-            logResourceLoad,
+            logResourceLoadConfig,
-            logEmptyAvatars,
+            logEmptyAvatarsConfig,
-            autoStateChangeEnabled,
+            autoStateChangeEnabledConfig,
-            autoStateChangeAloneStatus,
+            autoStateChangeAloneStatusConfig,
-            autoStateChangeCompanyStatus,
+            autoStateChangeCompanyStatusConfig,
-            autoStateChangeInstanceTypesStr,
+            autoStateChangeInstanceTypesStrConfig,
-            autoStateChangeNoFriends,
+            autoStateChangeNoFriendsConfig,
-            autoAcceptInviteRequests
+            autoAcceptInviteRequestsConfig
         ] = await Promise.all([
             configRepository.getBool('VRCX_StartAtWindowsStartup', false),
             VRCXStorage.Get('VRCX_StartAsMinimizedState'),
@@ -79,115 +78,83 @@ export const useGeneralSettingsStore = defineStore('GeneralSettings', () => {
             configRepository.getString('VRCX_autoAcceptInviteRequests', 'Off')
         ]);
 
-        state.isStartAtWindowsStartup = isStartAtWindowsStartup;
+        isStartAtWindowsStartup.value = isStartAtWindowsStartupConfig;
-        state.isStartAsMinimizedState = isStartAsMinimizedState === 'true';
+        isStartAsMinimizedState.value =
+            isStartAsMinimizedStateConfig === 'true';
 
-        if (isCloseToTrayConfigBool) {
+        if (isCloseToTrayConfigBoolConfig) {
-            state.isCloseToTray = isCloseToTrayConfigBool;
+            isCloseToTray.value = isCloseToTrayConfigBoolConfig;
 
             await VRCXStorage.Set(
                 'VRCX_CloseToTray',
-                state.isCloseToTray.toString()
+                isCloseToTray.value.toString()
             );
             await configRepository.remove('VRCX_CloseToTray');
         } else {
-            state.isCloseToTray = isCloseToTray === 'true';
+            isCloseToTray.value = isCloseToTrayConfig === 'true';
         }
 
-        state.disableGpuAcceleration = disableGpuAccelerationStr === 'true';
+        disableGpuAcceleration.value =
-        state.disableVrOverlayGpuAcceleration =
+            disableGpuAccelerationStrConfig === 'true';
-            disableVrOverlayGpuAccelerationStr === 'true';
+        disableVrOverlayGpuAcceleration.value =
-        state.localFavoriteFriendsGroups = JSON.parse(
+            disableVrOverlayGpuAccelerationStrConfig === 'true';
-            localFavoriteFriendsGroupsStr
+        localFavoriteFriendsGroups.value = JSON.parse(
+            localFavoriteFriendsGroupsStrConfig
         );
-        state.udonExceptionLogging = udonExceptionLogging;
+        udonExceptionLogging.value = udonExceptionLoggingConfig;
-        state.logResourceLoad = logResourceLoad;
+        logResourceLoad.value = logResourceLoadConfig;
-        state.logEmptyAvatars = logEmptyAvatars;
+        logEmptyAvatars.value = logEmptyAvatarsConfig;
-        state.autoStateChangeEnabled = autoStateChangeEnabled;
+        autoStateChangeEnabled.value = autoStateChangeEnabledConfig;
-        state.autoStateChangeAloneStatus = autoStateChangeAloneStatus;
+        autoStateChangeAloneStatus.value = autoStateChangeAloneStatusConfig;
-        state.autoStateChangeCompanyStatus = autoStateChangeCompanyStatus;
+        autoStateChangeCompanyStatus.value = autoStateChangeCompanyStatusConfig;
-        state.autoStateChangeInstanceTypes = JSON.parse(
+        autoStateChangeInstanceTypes.value = JSON.parse(
-            autoStateChangeInstanceTypesStr
+            autoStateChangeInstanceTypesStrConfig
         );
-        state.autoStateChangeNoFriends = autoStateChangeNoFriends;
+        autoStateChangeNoFriends.value = autoStateChangeNoFriendsConfig;
-        state.autoAcceptInviteRequests = autoAcceptInviteRequests;
+        autoAcceptInviteRequests.value = autoAcceptInviteRequestsConfig;
     }
 
     initGeneralSettings();
 
-    const isStartAtWindowsStartup = computed(
-        () => state.isStartAtWindowsStartup
-    );
-    const isStartAsMinimizedState = computed(
-        () => state.isStartAsMinimizedState
-    );
-    const disableGpuAcceleration = computed(() => state.disableGpuAcceleration);
-    const isCloseToTray = computed(() => state.isCloseToTray);
-    const disableVrOverlayGpuAcceleration = computed(
-        () => state.disableVrOverlayGpuAcceleration
-    );
-    const localFavoriteFriendsGroups = computed(
-        () => state.localFavoriteFriendsGroups
-    );
-    const udonExceptionLogging = computed(() => state.udonExceptionLogging);
-    const logResourceLoad = computed(() => state.logResourceLoad);
-    const logEmptyAvatars = computed(() => state.logEmptyAvatars);
-    const autoStateChangeEnabled = computed(() => state.autoStateChangeEnabled);
-    const autoStateChangeAloneStatus = computed(
-        () => state.autoStateChangeAloneStatus
-    );
-    const autoStateChangeCompanyStatus = computed(
-        () => state.autoStateChangeCompanyStatus
-    );
-    const autoStateChangeInstanceTypes = computed(
-        () => state.autoStateChangeInstanceTypes
-    );
-    const autoStateChangeNoFriends = computed(
-        () => state.autoStateChangeNoFriends
-    );
-    const autoAcceptInviteRequests = computed(
-        () => state.autoAcceptInviteRequests
-    );
-
     function setIsStartAtWindowsStartup() {
-        state.isStartAtWindowsStartup = !state.isStartAtWindowsStartup;
+        isStartAtWindowsStartup.value = !isStartAtWindowsStartup.value;
         configRepository.setBool(
             'VRCX_StartAtWindowsStartup',
-            state.isStartAtWindowsStartup
+            isStartAtWindowsStartup.value
         );
-        AppApi.SetStartup(state.isStartAtWindowsStartup);
+        AppApi.SetStartup(isStartAtWindowsStartup.value);
     }
     function setIsStartAsMinimizedState() {
-        state.isStartAsMinimizedState = !state.isStartAsMinimizedState;
+        isStartAsMinimizedState.value = !isStartAsMinimizedState.value;
         VRCXStorage.Set(
             'VRCX_StartAsMinimizedState',
-            state.isStartAsMinimizedState.toString()
+            isStartAsMinimizedState.value.toString()
         );
     }
     function setIsCloseToTray() {
-        state.isCloseToTray = !state.isCloseToTray;
+        isCloseToTray.value = !isCloseToTray.value;
-        VRCXStorage.Set('VRCX_CloseToTray', state.isCloseToTray.toString());
+        VRCXStorage.Set('VRCX_CloseToTray', isCloseToTray.value.toString());
     }
     function setDisableGpuAcceleration() {
-        state.disableGpuAcceleration = !state.disableGpuAcceleration;
+        disableGpuAcceleration.value = !disableGpuAcceleration.value;
         VRCXStorage.Set(
             'VRCX_DisableGpuAcceleration',
-            state.disableGpuAcceleration.toString()
+            disableGpuAcceleration.value.toString()
         );
     }
     function setDisableVrOverlayGpuAcceleration() {
-        state.disableVrOverlayGpuAcceleration =
+        disableVrOverlayGpuAcceleration.value =
-            !state.disableVrOverlayGpuAcceleration;
+            !disableVrOverlayGpuAcceleration.value;
         VRCXStorage.Set(
             'VRCX_DisableVrOverlayGpuAcceleration',
-            state.disableVrOverlayGpuAcceleration.toString()
+            disableVrOverlayGpuAcceleration.value.toString()
         );
     }
     /**
      * @param {string[]} value
      */
     function setLocalFavoriteFriendsGroups(value) {
-        state.localFavoriteFriendsGroups = value;
+        localFavoriteFriendsGroups.value = value;
         configRepository.setString(
             'VRCX_localFavoriteFriendsGroups',
             JSON.stringify(value)
@@ -195,69 +162,69 @@ export const useGeneralSettingsStore = defineStore('GeneralSettings', () => {
         friendStore.updateLocalFavoriteFriends();
     }
     function setUdonExceptionLogging() {
-        state.udonExceptionLogging = !state.udonExceptionLogging;
+        udonExceptionLogging.value = !udonExceptionLogging.value;
         configRepository.setBool(
             'VRCX_udonExceptionLogging',
-            state.udonExceptionLogging
+            udonExceptionLogging.value
         );
     }
     function setLogResourceLoad() {
-        state.logResourceLoad = !state.logResourceLoad;
+        logResourceLoad.value = !logResourceLoad.value;
-        configRepository.setBool('VRCX_logResourceLoad', state.logResourceLoad);
+        configRepository.setBool('VRCX_logResourceLoad', logResourceLoad.value);
     }
     function setLogEmptyAvatars() {
-        state.logEmptyAvatars = !state.logEmptyAvatars;
+        logEmptyAvatars.value = !logEmptyAvatars.value;
-        configRepository.setBool('VRCX_logEmptyAvatars', state.logEmptyAvatars);
+        configRepository.setBool('VRCX_logEmptyAvatars', logEmptyAvatars.value);
     }
     function setAutoStateChangeEnabled() {
-        state.autoStateChangeEnabled = !state.autoStateChangeEnabled;
+        autoStateChangeEnabled.value = !autoStateChangeEnabled.value;
         configRepository.setBool(
             'VRCX_autoStateChangeEnabled',
-            state.autoStateChangeEnabled
+            autoStateChangeEnabled.value
         );
     }
     /**
      * @param {string} value
      */
     function setAutoStateChangeAloneStatus(value) {
-        state.autoStateChangeAloneStatus = value;
+        autoStateChangeAloneStatus.value = value;
         configRepository.setString(
             'VRCX_autoStateChangeAloneStatus',
-            state.autoStateChangeAloneStatus
+            autoStateChangeAloneStatus.value
         );
     }
     /**
      * @param {string} value
      */
     function setAutoStateChangeCompanyStatus(value) {
-        state.autoStateChangeCompanyStatus = value;
+        autoStateChangeCompanyStatus.value = value;
         configRepository.setString(
             'VRCX_autoStateChangeCompanyStatus',
-            state.autoStateChangeCompanyStatus
+            autoStateChangeCompanyStatus.value
         );
     }
     function setAutoStateChangeInstanceTypes(value) {
-        state.autoStateChangeInstanceTypes = value;
+        autoStateChangeInstanceTypes.value = value;
         configRepository.setString(
             'VRCX_autoStateChangeInstanceTypes',
-            JSON.stringify(state.autoStateChangeInstanceTypes)
+            JSON.stringify(autoStateChangeInstanceTypes.value)
         );
     }
     function setAutoStateChangeNoFriends() {
-        state.autoStateChangeNoFriends = !state.autoStateChangeNoFriends;
+        autoStateChangeNoFriends.value = !autoStateChangeNoFriends.value;
         configRepository.setBool(
             'VRCX_autoStateChangeNoFriends',
-            state.autoStateChangeNoFriends
+            autoStateChangeNoFriends.value
         );
     }
     /**
      * @param {string} value
      */
     function setAutoAcceptInviteRequests(value) {
-        state.autoAcceptInviteRequests = value;
+        autoAcceptInviteRequests.value = value;
         configRepository.setString(
             'VRCX_autoAcceptInviteRequests',
-            state.autoAcceptInviteRequests
+            autoAcceptInviteRequests.value
         );
     }
 
@@ -303,8 +270,6 @@ export const useGeneralSettingsStore = defineStore('GeneralSettings', () => {
     }
 
     return {
-        state,
-
         isStartAtWindowsStartup,
         isStartAsMinimizedState,
         isCloseToTray,

src/stores/settings/notifications.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive } from 'vue';
+import { ref } from 'vue';
 import { ElMessageBox } from 'element-plus';
 
 import { useI18n } from 'vue-i18n';
@@ -13,19 +13,19 @@ export const useNotificationsSettingsStore = defineStore(
         const vrStore = useVrStore();
 
         const { t } = useI18n();
-        const state = reactive({
+
-            overlayToast: 'Game Running',
+        const overlayToast = ref('Game Running');
-            openVR: false,
+        const openVR = ref(false);
-            overlayNotifications: true,
+        const overlayNotifications = ref(true);
-            xsNotifications: true,
+        const xsNotifications = ref(true);
-            ovrtHudNotifications: true,
+        const ovrtHudNotifications = ref(true);
-            ovrtWristNotifications: false,
+        const ovrtWristNotifications = ref(false);
-            imageNotifications: true,
+        const imageNotifications = ref(true);
-            desktopToast: 'Never',
+        const desktopToast = ref('Never');
-            afkDesktopToast: false,
+        const afkDesktopToast = ref(false);
-            notificationTTS: 'Never',
+        const notificationTTS = ref('Never');
-            notificationTTSNickName: false,
+        const notificationTTSNickName = ref(false);
-            sharedFeedFilters: {
+        const sharedFeedFilters = ref({
             noty: {
                 Location: 'Off',
                 OnPlayerJoined: 'VIP',
@@ -110,32 +110,31 @@ export const useNotificationsSettingsStore = defineStore(
                 Muted: 'On',
                 Unmuted: 'On'
             }
-            },
-            isTestTTSVisible: false,
-            notificationTTSVoice: 0,
-            notificationTTSTest: '',
-            TTSvoices: [],
-            notificationPosition: 'topCenter',
-            notificationTimeout: 3000
         });
+        const isTestTTSVisible = ref(false);
+        const notificationTTSVoice = ref(0);
+        const TTSvoices = ref([]);
+        const notificationTTSTest = ref('');
+        const notificationPosition = ref('topCenter');
+        const notificationTimeout = ref(3000);
 
         async function initNotificationsSettings() {
             const [
-                overlayToast,
+                overlayToastConfig,
-                overlayNotifications,
+                overlayNotificationsConfig,
-                openVR,
+                openVRConfig,
-                xsNotifications,
+                xsNotificationsConfig,
-                ovrtHudNotifications,
+                ovrtHudNotificationsConfig,
-                ovrtWristNotifications,
+                ovrtWristNotificationsConfig,
-                imageNotifications,
+                imageNotificationsConfig,
-                desktopToast,
+                desktopToastConfig,
-                afkDesktopToast,
+                afkDesktopToastConfig,
-                notificationTTS,
+                notificationTTSConfig,
-                notificationTTSNickName,
+                notificationTTSNickNameConfig,
-                sharedFeedFilters,
+                sharedFeedFiltersConfig,
-                notificationTTSVoice,
+                notificationTTSVoiceConfig,
-                notificationPosition,
+                notificationPositionConfig,
-                notificationTimeout
+                notificationTimeoutConfig
             ] = await Promise.all([
                 configRepository.getString('VRCX_overlayToast', 'Game Running'),
                 configRepository.getBool('VRCX_overlayNotifications', true),
@@ -160,22 +159,22 @@ export const useNotificationsSettingsStore = defineStore(
                 configRepository.getString('VRCX_notificationTimeout', '3000')
             ]);
 
-            state.overlayToast = overlayToast;
+            overlayToast.value = overlayToastConfig;
-            state.openVR = openVR;
+            openVR.value = openVRConfig;
-            state.overlayNotifications = overlayNotifications;
+            overlayNotifications.value = overlayNotificationsConfig;
-            state.xsNotifications = xsNotifications;
+            xsNotifications.value = xsNotificationsConfig;
-            state.ovrtHudNotifications = ovrtHudNotifications;
+            ovrtHudNotifications.value = ovrtHudNotificationsConfig;
-            state.ovrtWristNotifications = ovrtWristNotifications;
+            ovrtWristNotifications.value = ovrtWristNotificationsConfig;
-            state.imageNotifications = imageNotifications;
+            imageNotifications.value = imageNotificationsConfig;
-            state.desktopToast = desktopToast;
+            desktopToast.value = desktopToastConfig;
-            state.afkDesktopToast = afkDesktopToast;
+            afkDesktopToast.value = afkDesktopToastConfig;
-            state.notificationTTS = notificationTTS;
+            notificationTTS.value = notificationTTSConfig;
-            state.notificationTTSNickName = notificationTTSNickName;
+            notificationTTSNickName.value = notificationTTSNickNameConfig;
-            state.sharedFeedFilters = JSON.parse(sharedFeedFilters);
+            sharedFeedFilters.value = JSON.parse(sharedFeedFiltersConfig);
-            state.notificationTTSVoice = Number(notificationTTSVoice);
+            notificationTTSVoice.value = Number(notificationTTSVoiceConfig);
-            state.TTSvoices = speechSynthesis.getVoices();
+            TTSvoices.value = speechSynthesis.getVoices();
-            state.notificationPosition = notificationPosition;
+            notificationPosition.value = notificationPositionConfig;
-            state.notificationTimeout = Number(notificationTimeout);
+            notificationTimeout.value = Number(notificationTimeoutConfig);
 
             initSharedFeedFilters();
 
@@ -187,96 +186,55 @@ export const useNotificationsSettingsStore = defineStore(
 
         initNotificationsSettings();
 
-        const overlayToast = computed(() => state.overlayToast);
-        const openVR = computed(() => state.openVR);
-        const overlayNotifications = computed(() => state.overlayNotifications);
-        const xsNotifications = computed(() => state.xsNotifications);
-        const ovrtHudNotifications = computed(() => state.ovrtHudNotifications);
-        const ovrtWristNotifications = computed(
-            () => state.ovrtWristNotifications
-        );
-        const imageNotifications = computed(() => state.imageNotifications);
-        const desktopToast = computed(() => state.desktopToast);
-        const afkDesktopToast = computed(() => state.afkDesktopToast);
-        const notificationTTS = computed(() => state.notificationTTS);
-        const notificationTTSNickName = computed(
-            () => state.notificationTTSNickName
-        );
-        const sharedFeedFilters = computed({
-            get: () => state.sharedFeedFilters,
-            set: (value) => (state.sharedFeedFilters = value)
-        });
-        const isTestTTSVisible = computed({
-            get: () => state.isTestTTSVisible,
-            set: (value) => (state.isTestTTSVisible = value)
-        });
-        const notificationTTSVoice = computed({
-            get: () => state.notificationTTSVoice,
-            set: (value) => (state.notificationTTSVoice = value)
-        });
-        const TTSvoices = computed({
-            get: () => state.TTSvoices,
-            set: (value) => (state.TTSvoices = value)
-        });
-        const notificationTTSTest = computed({
-            get: () => state.notificationTTSTest,
-            set: (value) => (state.notificationTTSTest = value)
-        });
-        const notificationPosition = computed(() => state.notificationPosition);
-        const notificationTimeout = computed({
-            get: () => state.notificationTimeout,
-            set: (value) => (state.notificationTimeout = value)
-        });
-
         function setOverlayToast(value) {
-            state.overlayToast = value;
+            overlayToast.value = value;
             configRepository.setString('VRCX_overlayToast', value);
         }
         function setOverlayNotifications() {
-            state.overlayNotifications = !state.overlayNotifications;
+            overlayNotifications.value = !overlayNotifications.value;
             configRepository.setBool(
                 'VRCX_overlayNotifications',
-                state.overlayNotifications
+                overlayNotifications.value
             );
         }
         function setOpenVR() {
-            state.openVR = !state.openVR;
+            openVR.value = !openVR.value;
-            configRepository.setBool('openVR', state.openVR);
+            configRepository.setBool('openVR', openVR.value);
         }
         function setXsNotifications() {
-            state.xsNotifications = !state.xsNotifications;
+            xsNotifications.value = !xsNotifications.value;
             configRepository.setBool(
                 'VRCX_xsNotifications',
-                state.xsNotifications
+                xsNotifications.value
             );
         }
         function setOvrtHudNotifications() {
-            state.ovrtHudNotifications = !state.ovrtHudNotifications;
+            ovrtHudNotifications.value = !ovrtHudNotifications.value;
             configRepository.setBool(
                 'VRCX_ovrtHudNotifications',
-                state.ovrtHudNotifications
+                ovrtHudNotifications.value
             );
         }
         function setOvrtWristNotifications() {
-            state.ovrtWristNotifications = !state.ovrtWristNotifications;
+            ovrtWristNotifications.value = !ovrtWristNotifications.value;
             configRepository.setBool(
                 'VRCX_ovrtWristNotifications',
-                state.ovrtWristNotifications
+                ovrtWristNotifications.value
             );
         }
         function setImageNotifications() {
-            state.imageNotifications = !state.imageNotifications;
+            imageNotifications.value = !imageNotifications.value;
             configRepository.setBool(
                 'VRCX_imageNotifications',
-                state.imageNotifications
+                imageNotifications.value
             );
         }
 
         function changeNotificationPosition(value) {
-            state.notificationPosition = value;
+            notificationPosition.value = value;
             configRepository.setString(
                 'VRCX_notificationPosition',
-                state.notificationPosition
+                notificationPosition.value
             );
             vrStore.updateVRConfigVars();
         }
@@ -284,81 +242,81 @@ export const useNotificationsSettingsStore = defineStore(
          * @param {string} value
          */
         function setDesktopToast(value) {
-            state.desktopToast = value;
+            desktopToast.value = value;
             configRepository.setString('VRCX_desktopToast', value);
         }
         function setAfkDesktopToast() {
-            state.afkDesktopToast = !state.afkDesktopToast;
+            afkDesktopToast.value = !afkDesktopToast.value;
             configRepository.setBool(
                 'VRCX_afkDesktopToast',
-                state.afkDesktopToast
+                afkDesktopToast.value
             );
         }
         /**
          * @param {string} value
          */
         function setNotificationTTS(value) {
-            state.notificationTTS = value;
+            notificationTTS.value = value;
             configRepository.setString('VRCX_notificationTTS', value);
         }
         function setNotificationTTSNickName() {
-            state.notificationTTSNickName = !state.notificationTTSNickName;
+            notificationTTSNickName.value = !notificationTTSNickName.value;
             configRepository.setBool(
                 'VRCX_notificationTTSNickName',
-                state.notificationTTSNickName
+                notificationTTSNickName.value
             );
         }
         function initSharedFeedFilters() {
-            if (!state.sharedFeedFilters.noty.Blocked) {
+            if (!sharedFeedFilters.value.noty.Blocked) {
-                state.sharedFeedFilters.noty.Blocked = 'Off';
+                sharedFeedFilters.value.noty.Blocked = 'Off';
-                state.sharedFeedFilters.noty.Unblocked = 'Off';
+                sharedFeedFilters.value.noty.Unblocked = 'Off';
-                state.sharedFeedFilters.noty.Muted = 'Off';
+                sharedFeedFilters.value.noty.Muted = 'Off';
-                state.sharedFeedFilters.noty.Unmuted = 'Off';
+                sharedFeedFilters.value.noty.Unmuted = 'Off';
-                state.sharedFeedFilters.wrist.Blocked = 'On';
+                sharedFeedFilters.value.wrist.Blocked = 'On';
-                state.sharedFeedFilters.wrist.Unblocked = 'On';
+                sharedFeedFilters.value.wrist.Unblocked = 'On';
-                state.sharedFeedFilters.wrist.Muted = 'On';
+                sharedFeedFilters.value.wrist.Muted = 'On';
-                state.sharedFeedFilters.wrist.Unmuted = 'On';
+                sharedFeedFilters.value.wrist.Unmuted = 'On';
             }
-            if (!state.sharedFeedFilters.noty['group.announcement']) {
+            if (!sharedFeedFilters.value.noty['group.announcement']) {
-                state.sharedFeedFilters.noty['group.announcement'] = 'On';
+                sharedFeedFilters.value.noty['group.announcement'] = 'On';
-                state.sharedFeedFilters.noty['group.informative'] = 'On';
+                sharedFeedFilters.value.noty['group.informative'] = 'On';
-                state.sharedFeedFilters.noty['group.invite'] = 'On';
+                sharedFeedFilters.value.noty['group.invite'] = 'On';
-                state.sharedFeedFilters.noty['group.joinRequest'] = 'Off';
+                sharedFeedFilters.value.noty['group.joinRequest'] = 'Off';
-                state.sharedFeedFilters.wrist['group.announcement'] = 'On';
+                sharedFeedFilters.value.wrist['group.announcement'] = 'On';
-                state.sharedFeedFilters.wrist['group.informative'] = 'On';
+                sharedFeedFilters.value.wrist['group.informative'] = 'On';
-                state.sharedFeedFilters.wrist['group.invite'] = 'On';
+                sharedFeedFilters.value.wrist['group.invite'] = 'On';
-                state.sharedFeedFilters.wrist['group.joinRequest'] = 'On';
+                sharedFeedFilters.value.wrist['group.joinRequest'] = 'On';
             }
-            if (!state.sharedFeedFilters.noty['group.queueReady']) {
+            if (!sharedFeedFilters.value.noty['group.queueReady']) {
-                state.sharedFeedFilters.noty['group.queueReady'] = 'On';
+                sharedFeedFilters.value.noty['group.queueReady'] = 'On';
-                state.sharedFeedFilters.wrist['group.queueReady'] = 'On';
+                sharedFeedFilters.value.wrist['group.queueReady'] = 'On';
             }
-            if (!state.sharedFeedFilters.noty['instance.closed']) {
+            if (!sharedFeedFilters.value.noty['instance.closed']) {
-                state.sharedFeedFilters.noty['instance.closed'] = 'On';
+                sharedFeedFilters.value.noty['instance.closed'] = 'On';
-                state.sharedFeedFilters.wrist['instance.closed'] = 'On';
+                sharedFeedFilters.value.wrist['instance.closed'] = 'On';
             }
-            if (!state.sharedFeedFilters.noty.External) {
+            if (!sharedFeedFilters.value.noty.External) {
-                state.sharedFeedFilters.noty.External = 'On';
+                sharedFeedFilters.value.noty.External = 'On';
-                state.sharedFeedFilters.wrist.External = 'On';
+                sharedFeedFilters.value.wrist.External = 'On';
             }
-            if (!state.sharedFeedFilters.noty.groupChange) {
+            if (!sharedFeedFilters.value.noty.groupChange) {
-                state.sharedFeedFilters.noty.groupChange = 'On';
+                sharedFeedFilters.value.noty.groupChange = 'On';
-                state.sharedFeedFilters.wrist.groupChange = 'On';
+                sharedFeedFilters.value.wrist.groupChange = 'On';
             }
-            if (!state.sharedFeedFilters.noty['group.transfer']) {
+            if (!sharedFeedFilters.value.noty['group.transfer']) {
-                state.sharedFeedFilters.noty['group.transfer'] = 'On';
+                sharedFeedFilters.value.noty['group.transfer'] = 'On';
-                state.sharedFeedFilters.wrist['group.transfer'] = 'On';
+                sharedFeedFilters.value.wrist['group.transfer'] = 'On';
             }
-            if (!state.sharedFeedFilters.noty.boop) {
+            if (!sharedFeedFilters.value.noty.boop) {
-                state.sharedFeedFilters.noty.boop = 'Off';
+                sharedFeedFilters.value.noty.boop = 'Off';
-                state.sharedFeedFilters.wrist.boop = 'On';
+                sharedFeedFilters.value.wrist.boop = 'On';
             }
         }
         function setNotificationTTSVoice(index) {
-            state.notificationTTSVoice = index;
+            notificationTTSVoice.value = index;
             configRepository.setString(
                 'VRCX_notificationTTSVoice',
-                state.notificationTTSVoice.toString()
+                notificationTTSVoice.value.toString()
             );
         }
 
@@ -367,15 +325,15 @@ export const useNotificationsSettingsStore = defineStore(
             if (WINDOWS) {
                 voices = speechSynthesis.getVoices();
             } else {
-                voices = state.TTSvoices;
+                voices = TTSvoices.value;
             }
             if (voices.length === 0) {
                 return '';
             }
-            if (state.notificationTTSVoice >= voices.length) {
+            if (notificationTTSVoice.value >= voices.length) {
                 setNotificationTTSVoice(0);
             }
-            return voices[state.notificationTTSVoice].name;
+            return voices[notificationTTSVoice.value].name;
         }
 
         async function changeTTSVoice(index) {
@@ -384,7 +342,7 @@ export const useNotificationsSettingsStore = defineStore(
             if (WINDOWS) {
                 voices = speechSynthesis.getVoices();
             } else {
-                voices = state.TTSvoices;
+                voices = TTSvoices.value;
             }
             if (voices.length === 0) {
                 return;
@@ -395,7 +353,7 @@ export const useNotificationsSettingsStore = defineStore(
         }
 
         function updateTTSVoices() {
-            state.TTSvoices = speechSynthesis.getVoices();
+            TTSvoices.value = speechSynthesis.getVoices();
             if (LINUX) {
                 const voices = speechSynthesis.getVoices();
                 let uniqueVoices = [];
@@ -407,7 +365,7 @@ export const useNotificationsSettingsStore = defineStore(
                 uniqueVoices = uniqueVoices.filter((v) =>
                     v.lang.startsWith('en')
                 );
-                state.TTSvoices = uniqueVoices;
+                TTSvoices.value = uniqueVoices;
             }
         }
         async function saveNotificationTTS(value) {
@@ -424,7 +382,7 @@ export const useNotificationsSettingsStore = defineStore(
 
         function testNotificationTTS() {
             speechSynthesis.cancel();
-            speak(state.notificationTTSTest);
+            speak(notificationTTSTest.value);
         }
 
         function speak(text) {
@@ -434,8 +392,8 @@ export const useNotificationsSettingsStore = defineStore(
                 return;
             }
             let index = 0;
-            if (state.notificationTTSVoice < voices.length) {
+            if (notificationTTSVoice.value < voices.length) {
-                index = state.notificationTTSVoice;
+                index = notificationTTSVoice.value;
             }
             tts.voice = voices[index];
             tts.text = text;
@@ -450,7 +408,7 @@ export const useNotificationsSettingsStore = defineStore(
                     distinguishCancelAndClose: true,
                     confirmButtonText: t('prompt.notification_timeout.ok'),
                     cancelButtonText: t('prompt.notification_timeout.cancel'),
-                    inputValue: state.notificationTimeout / 1000,
+                    inputValue: notificationTimeout.value / 1000,
                     inputPattern: /\d+$/,
                     inputErrorMessage: t(
                         'prompt.notification_timeout.input_error'
@@ -459,12 +417,12 @@ export const useNotificationsSettingsStore = defineStore(
             )
                 .then(async ({ value }) => {
                     if (value && !isNaN(value)) {
-                        state.notificationTimeout = Math.trunc(
+                        notificationTimeout.value = Math.trunc(
                             Number(value) * 1000
                         );
                         await configRepository.setString(
                             'VRCX_notificationTimeout',
-                            state.notificationTimeout.toString()
+                            notificationTimeout.value.toString()
                         );
                         vrStore.updateVRConfigVars();
                     }
@@ -473,8 +431,6 @@ export const useNotificationsSettingsStore = defineStore(
         }
 
         return {
-            state,
-
             overlayToast,
             openVR,
             overlayNotifications,

src/stores/settings/wristOverlay.js

@@ -1,37 +1,35 @@
 import { defineStore } from 'pinia';
-import { computed, reactive } from 'vue';
+import { ref } from 'vue';
 import configRepository from '../../service/config';
 
 export const useWristOverlaySettingsStore = defineStore(
     'WristOverlaySettings',
     () => {
-        const state = reactive({
+        const overlayWrist = ref(true);
-            overlayWrist: true,
+        const hidePrivateFromFeed = ref(false);
-            hidePrivateFromFeed: false,
+        const openVRAlways = ref(false);
-            openVRAlways: false,
+        const overlaybutton = ref(false);
-            overlaybutton: false,
+        const overlayHand = ref('0');
-            overlayHand: '0',
+        const vrBackgroundEnabled = ref(false);
-            vrBackgroundEnabled: false,
+        const minimalFeed = ref(true);
-            minimalFeed: true,
+        const hideDevicesFromFeed = ref(false);
-            hideDevicesFromFeed: false,
+        const vrOverlayCpuUsage = ref(false);
-            vrOverlayCpuUsage: false,
+        const hideUptimeFromFeed = ref(false);
-            hideUptimeFromFeed: false,
+        const pcUptimeOnFeed = ref(false);
-            pcUptimeOnFeed: false
-        });
 
         async function initWristOverlaySettings() {
             const [
-                overlayWrist,
+                overlayWristConfig,
-                hidePrivateFromFeed,
+                hidePrivateFromFeedConfig,
-                openVRAlways,
+                openVRAlwaysConfig,
-                overlaybutton,
+                overlaybuttonConfig,
-                overlayHand,
+                overlayHandConfig,
-                vrBackgroundEnabled,
+                vrBackgroundEnabledConfig,
-                minimalFeed,
+                minimalFeedConfig,
-                hideDevicesFromFeed,
+                hideDevicesFromFeedConfig,
-                vrOverlayCpuUsage,
+                vrOverlayCpuUsageConfig,
-                hideUptimeFromFeed,
+                hideUptimeFromFeedConfig,
-                pcUptimeOnFeed
+                pcUptimeOnFeedConfig
             ] = await Promise.all([
                 configRepository.getBool('VRCX_overlayWrist', false),
                 configRepository.getBool('VRCX_hidePrivateFromFeed', false),
@@ -46,55 +44,43 @@ export const useWristOverlaySettingsStore = defineStore(
                 configRepository.getBool('VRCX_pcUptimeOnFeed', false)
             ]);
 
-            state.overlayWrist = overlayWrist;
+            overlayWrist.value = overlayWristConfig;
-            state.hidePrivateFromFeed = hidePrivateFromFeed;
+            hidePrivateFromFeed.value = hidePrivateFromFeedConfig;
-            state.openVRAlways = openVRAlways;
+            openVRAlways.value = openVRAlwaysConfig;
-            state.overlaybutton = overlaybutton;
+            overlaybutton.value = overlaybuttonConfig;
-            state.overlayHand = String(overlayHand);
+            overlayHand.value = String(overlayHandConfig);
-            state.vrBackgroundEnabled = vrBackgroundEnabled;
+            vrBackgroundEnabled.value = vrBackgroundEnabledConfig;
-            state.minimalFeed = minimalFeed;
+            minimalFeed.value = minimalFeedConfig;
-            state.hideDevicesFromFeed = hideDevicesFromFeed;
+            hideDevicesFromFeed.value = hideDevicesFromFeedConfig;
-            state.vrOverlayCpuUsage = vrOverlayCpuUsage;
+            vrOverlayCpuUsage.value = vrOverlayCpuUsageConfig;
-            state.hideUptimeFromFeed = hideUptimeFromFeed;
+            hideUptimeFromFeed.value = hideUptimeFromFeedConfig;
-            state.pcUptimeOnFeed = pcUptimeOnFeed;
+            pcUptimeOnFeed.value = pcUptimeOnFeedConfig;
         }
 
-        const overlayWrist = computed(() => state.overlayWrist);
-        const hidePrivateFromFeed = computed(() => state.hidePrivateFromFeed);
-        const openVRAlways = computed(() => state.openVRAlways);
-        const overlaybutton = computed(() => state.overlaybutton);
-        const overlayHand = computed(() => state.overlayHand);
-        const vrBackgroundEnabled = computed(() => state.vrBackgroundEnabled);
-        const minimalFeed = computed(() => state.minimalFeed);
-        const hideDevicesFromFeed = computed(() => state.hideDevicesFromFeed);
-        const vrOverlayCpuUsage = computed(() => state.vrOverlayCpuUsage);
-        const hideUptimeFromFeed = computed(() => state.hideUptimeFromFeed);
-        const pcUptimeOnFeed = computed(() => state.pcUptimeOnFeed);
-
         function setOverlayWrist() {
-            state.overlayWrist = !state.overlayWrist;
+            overlayWrist.value = !overlayWrist.value;
-            configRepository.setBool('VRCX_overlayWrist', state.overlayWrist);
+            configRepository.setBool('VRCX_overlayWrist', overlayWrist.value);
         }
         function setHidePrivateFromFeed() {
-            state.hidePrivateFromFeed = !state.hidePrivateFromFeed;
+            hidePrivateFromFeed.value = !hidePrivateFromFeed.value;
             configRepository.setBool(
                 'VRCX_hidePrivateFromFeed',
-                state.hidePrivateFromFeed
+                hidePrivateFromFeed.value
             );
         }
         function setOpenVRAlways() {
-            state.openVRAlways = !state.openVRAlways;
+            openVRAlways.value = !openVRAlways.value;
-            configRepository.setBool('openVRAlways', state.openVRAlways);
+            configRepository.setBool('openVRAlways', openVRAlways.value);
         }
         function setOverlaybutton() {
-            state.overlaybutton = !state.overlaybutton;
+            overlaybutton.value = !overlaybutton.value;
-            configRepository.setBool('VRCX_overlaybutton', state.overlaybutton);
+            configRepository.setBool('VRCX_overlaybutton', overlaybutton.value);
         }
         /**
          * @param {string} value
          */
         function setOverlayHand(value) {
-            state.overlayHand = value;
+            overlayHand.value = value;
             let overlayHandInt = parseInt(value, 10);
             if (isNaN(overlayHandInt)) {
                 overlayHandInt = 0;
@@ -102,50 +88,48 @@ export const useWristOverlaySettingsStore = defineStore(
             configRepository.setInt('VRCX_overlayHand', overlayHandInt);
         }
         function setVrBackgroundEnabled() {
-            state.vrBackgroundEnabled = !state.vrBackgroundEnabled;
+            vrBackgroundEnabled.value = !vrBackgroundEnabled.value;
             configRepository.setBool(
                 'VRCX_vrBackgroundEnabled',
-                state.vrBackgroundEnabled
+                vrBackgroundEnabled.value
             );
         }
         function setMinimalFeed() {
-            state.minimalFeed = !state.minimalFeed;
+            minimalFeed.value = !minimalFeed.value;
-            configRepository.setBool('VRCX_minimalFeed', state.minimalFeed);
+            configRepository.setBool('VRCX_minimalFeed', minimalFeed.value);
         }
         function setHideDevicesFromFeed() {
-            state.hideDevicesFromFeed = !state.hideDevicesFromFeed;
+            hideDevicesFromFeed.value = !hideDevicesFromFeed.value;
             configRepository.setBool(
                 'VRCX_hideDevicesFromFeed',
-                state.hideDevicesFromFeed
+                hideDevicesFromFeed.value
             );
         }
         function setVrOverlayCpuUsage() {
-            state.vrOverlayCpuUsage = !state.vrOverlayCpuUsage;
+            vrOverlayCpuUsage.value = !vrOverlayCpuUsage.value;
             configRepository.setBool(
                 'VRCX_vrOverlayCpuUsage',
-                state.vrOverlayCpuUsage
+                vrOverlayCpuUsage.value
             );
         }
         function setHideUptimeFromFeed() {
-            state.hideUptimeFromFeed = !state.hideUptimeFromFeed;
+            hideUptimeFromFeed.value = !hideUptimeFromFeed.value;
             configRepository.setBool(
                 'VRCX_hideUptimeFromFeed',
-                state.hideUptimeFromFeed
+                hideUptimeFromFeed.value
             );
         }
         function setPcUptimeOnFeed() {
-            state.pcUptimeOnFeed = !state.pcUptimeOnFeed;
+            pcUptimeOnFeed.value = !pcUptimeOnFeed.value;
             configRepository.setBool(
                 'VRCX_pcUptimeOnFeed',
-                state.pcUptimeOnFeed
+                pcUptimeOnFeed.value
             );
         }
 
         initWristOverlaySettings();
 
         return {
-            state,
-
             overlayWrist,
             hidePrivateFromFeed,
             openVRAlways,

src/stores/sharedFeed.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive } from 'vue';
+import { reactive, ref } from 'vue';
 import * as workerTimers from 'worker-timers';
 import { groupRequest, worldRequest } from '../api';
 import { watchState } from '../service/watchState';
@@ -33,7 +33,12 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
     const photonStore = usePhotonStore();
 
     const state = reactive({
-        sharedFeed: {
+        updateSharedFeedTimer: null,
+        updateSharedFeedPending: false,
+        updateSharedFeedPendingForceUpdate: false
+    });
+
+    const sharedFeed = ref({
         gameLog: {
             wrist: [],
             lastEntryDate: ''
@@ -55,17 +60,6 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
             lastEntryDate: ''
         },
         pendingUpdate: false
-        },
-        updateSharedFeedTimer: null,
-        updateSharedFeedPending: false,
-        updateSharedFeedPendingForceUpdate: false
-    });
-
-    const sharedFeed = computed({
-        get: () => state.sharedFeed,
-        set: (value) => {
-            state.sharedFeed = value;
-        }
     });
 
     function updateSharedFeed(forceUpdate) {
@@ -107,7 +101,7 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
         updateSharedFeedNotificationTable(forceUpdate);
         updateSharedFeedFriendLogTable(forceUpdate);
         updateSharedFeedModerationAgainstTable(forceUpdate);
-        const feeds = state.sharedFeed;
+        const feeds = sharedFeed.value;
         if (!feeds.pendingUpdate) {
             return;
         }
@@ -159,7 +153,7 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
                                     args.ref = groupStore.applyGroup(args.json);
                                     workerTimers.setTimeout(() => {
                                         // delay to allow for group cache to update
-                                        state.sharedFeed.pendingUpdate = true;
+                                        sharedFeed.value.pendingUpdate = true;
                                         updateSharedFeed(false);
                                     }, 100);
                                     return args;
@@ -170,7 +164,7 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
                         }
                     }
                     if (typeof worldRef !== 'undefined') {
-                        var feedEntry = {
+                        let feedEntry = {
                             created_at: ref.created_at,
                             type: 'GPS',
                             userId: ref.id,
@@ -194,7 +188,7 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
                             .then((args) => {
                                 workerTimers.setTimeout(() => {
                                     // delay to allow for world cache to update
-                                    state.sharedFeed.pendingUpdate = true;
+                                    sharedFeed.value.pendingUpdate = true;
                                     updateSharedFeed(false);
                                 }, 100);
                                 return args;
@@ -253,12 +247,12 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
         if (i > 0) {
             if (
                 sessionTable[i - 1].created_at ===
-                    state.sharedFeed.gameLog.lastEntryDate &&
+                    sharedFeed.value.gameLog.lastEntryDate &&
                 forceUpdate === false
             ) {
                 return;
             }
-            state.sharedFeed.gameLog.lastEntryDate =
+            sharedFeed.value.gameLog.lastEntryDate =
                 sessionTable[i - 1].created_at;
         } else {
             return;
@@ -302,8 +296,8 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
             if (ctx.type === 'Location') {
                 locationJoinTime = Date.parse(ctx.created_at);
                 const locationJoinTimeOffset = locationJoinTime + 20 * 1000;
-                for (var k = w - 1; k > -1; k--) {
+                for (let k = w - 1; k > -1; k--) {
-                    var feedItem = wristArr[k];
+                    let feedItem = wristArr[k];
                     if (
                         (feedItem.type === 'OnPlayerJoined' ||
                             feedItem.type === 'BlockedOnPlayerJoined' ||
@@ -360,10 +354,11 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
                         continue;
                     }
 
+                    let type = '';
                     if (ref.type === 'block') {
-                        var type = `Blocked${ctx.type}`;
+                        type = `Blocked${ctx.type}`;
                     } else if (ref.type === 'mute') {
-                        var type = `Muted${ctx.type}`;
+                        type = `Muted${ctx.type}`;
                     } else {
                         continue;
                     }
@@ -408,8 +403,8 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
                 ++w;
             }
         }
-        state.sharedFeed.gameLog.wrist = wristArr;
+        sharedFeed.value.gameLog.wrist = wristArr;
-        state.sharedFeed.pendingUpdate = true;
+        sharedFeed.value.pendingUpdate = true;
     }
 
     function updateSharedFeedFeedTable(forceUpdate) {
@@ -419,12 +414,12 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
         if (i > 0) {
             if (
                 feedSession[i - 1].created_at ===
-                    state.sharedFeed.feedTable.lastEntryDate &&
+                    sharedFeed.value.feedTable.lastEntryDate &&
                 forceUpdate === false
             ) {
                 return;
             }
-            state.sharedFeed.feedTable.lastEntryDate =
+            sharedFeed.value.feedTable.lastEntryDate =
                 feedSession[i - 1].created_at;
         } else {
             return;
@@ -433,7 +428,7 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
         const wristArr = [];
         let w = 0;
         const wristFilter = notificationsSettingsStore.sharedFeedFilters.wrist;
-        for (var i = feedSession.length - 1; i > -1; i--) {
+        for (let i = feedSession.length - 1; i > -1; i--) {
             const ctx = feedSession[i];
             if (ctx.created_at < bias) {
                 break;
@@ -465,8 +460,8 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
                 ++w;
             }
         }
-        state.sharedFeed.feedTable.wrist = wristArr;
+        sharedFeed.value.feedTable.wrist = wristArr;
-        state.sharedFeed.pendingUpdate = true;
+        sharedFeed.value.pendingUpdate = true;
     }
 
     function updateSharedFeedNotificationTable(forceUpdate) {
@@ -476,12 +471,12 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
         if (i > 0) {
             if (
                 notificationTable[i - 1].created_at ===
-                    state.sharedFeed.notificationTable.lastEntryDate &&
+                    sharedFeed.value.notificationTable.lastEntryDate &&
                 forceUpdate === false
             ) {
                 return;
             }
-            state.sharedFeed.notificationTable.lastEntryDate =
+            sharedFeed.value.notificationTable.lastEntryDate =
                 notificationTable[i - 1].created_at;
         } else {
             return;
@@ -517,8 +512,8 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
                 ++w;
             }
         }
-        state.sharedFeed.notificationTable.wrist = wristArr;
+        sharedFeed.value.notificationTable.wrist = wristArr;
-        state.sharedFeed.pendingUpdate = true;
+        sharedFeed.value.pendingUpdate = true;
     }
 
     function updateSharedFeedFriendLogTable(forceUpdate) {
@@ -528,12 +523,12 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
         if (i > 0) {
             if (
                 friendLog[i - 1].created_at ===
-                    state.sharedFeed.friendLogTable.lastEntryDate &&
+                    sharedFeed.value.friendLogTable.lastEntryDate &&
                 forceUpdate === false
             ) {
                 return;
             }
-            state.sharedFeed.friendLogTable.lastEntryDate =
+            sharedFeed.value.friendLogTable.lastEntryDate =
                 friendLog[i - 1].created_at;
         } else {
             return;
@@ -542,7 +537,7 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
         const wristArr = [];
         let w = 0;
         const wristFilter = notificationsSettingsStore.sharedFeedFilters.wrist;
-        for (var i = friendLog.length - 1; i > -1; i--) {
+        for (let i = friendLog.length - 1; i > -1; i--) {
             const ctx = friendLog[i];
             if (ctx.created_at < bias) {
                 break;
@@ -567,8 +562,8 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
                 ++w;
             }
         }
-        state.sharedFeed.friendLogTable.wrist = wristArr;
+        sharedFeed.value.friendLogTable.wrist = wristArr;
-        state.sharedFeed.pendingUpdate = true;
+        sharedFeed.value.pendingUpdate = true;
     }
 
     function updateSharedFeedModerationAgainstTable(forceUpdate) {
@@ -578,12 +573,12 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
         if (i > 0) {
             if (
                 moderationAgainst[i - 1].created_at ===
-                    state.sharedFeed.moderationAgainstTable.lastEntryDate &&
+                    sharedFeed.value.moderationAgainstTable.lastEntryDate &&
                 forceUpdate === false
             ) {
                 return;
             }
-            state.sharedFeed.moderationAgainstTable.lastEntryDate =
+            sharedFeed.value.moderationAgainstTable.lastEntryDate =
                 moderationAgainst[i - 1].created_at;
         } else {
             return;
@@ -592,7 +587,7 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
         const wristArr = [];
         let w = 0;
         const wristFilter = notificationsSettingsStore.sharedFeedFilters.wrist;
-        for (var i = moderationAgainst.length - 1; i > -1; i--) {
+        for (let i = moderationAgainst.length - 1; i > -1; i--) {
             const ctx = moderationAgainst[i];
             if (ctx.created_at < bias) {
                 break;
@@ -619,8 +614,8 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
                 ++w;
             }
         }
-        state.sharedFeed.moderationAgainstTable.wrist = wristArr;
+        sharedFeed.value.moderationAgainstTable.wrist = wristArr;
-        state.sharedFeed.pendingUpdate = true;
+        sharedFeed.value.pendingUpdate = true;
     }
 
     return {

src/stores/ui.js

@@ -1,49 +1,32 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { watchState } from '../service/watchState';
 import { useNotificationStore } from './notification';
 
 export const useUiStore = defineStore('Ui', () => {
     const notificationStore = useNotificationStore();
-    const state = reactive({
-        menuActiveIndex: 'feed',
-        notifiedMenus: [],
-        shiftHeld: false
-    });
 
     document.addEventListener('keydown', function (e) {
         if (e.shiftKey) {
-            state.shiftHeld = true;
+            shiftHeld.value = true;
         }
     });
 
     document.addEventListener('keyup', function (e) {
         if (!e.shiftKey) {
-            state.shiftHeld = false;
+            shiftHeld.value = false;
         }
     });
 
-    const shiftHeld = computed(() => state.shiftHeld);
+    const menuActiveIndex = ref('feed');
-
+    const notifiedMenus = ref([]);
-    const menuActiveIndex = computed({
+    const shiftHeld = ref(false);
-        get: () => state.menuActiveIndex,
-        set: (value) => {
-            state.menuActiveIndex = value;
-        }
-    });
-
-    const notifiedMenus = computed({
-        get: () => state.notifiedMenus,
-        set: (value) => {
-            state.notifiedMenus = value;
-        }
-    });
 
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
             if (isLoggedIn) {
-                state.menuActiveIndex = 'feed';
+                menuActiveIndex.value = 'feed';
             }
         },
         { flush: 'sync' }
@@ -51,15 +34,15 @@ export const useUiStore = defineStore('Ui', () => {
 
     function notifyMenu(index) {
         if (
-            index !== state.menuActiveIndex &&
+            index !== menuActiveIndex.value &&
-            !state.notifiedMenus.includes(index)
+            !notifiedMenus.value.includes(index)
         ) {
-            state.notifiedMenus.push(index);
+            notifiedMenus.value.push(index);
         }
     }
 
     function selectMenu(index) {
-        state.menuActiveIndex = index;
+        menuActiveIndex.value = index;
         removeNotify(index);
         if (index === 'notification') {
             notificationStore.unseenNotifications = [];
@@ -67,12 +50,10 @@ export const useUiStore = defineStore('Ui', () => {
     }
 
     function removeNotify(index) {
-        state.notifiedMenus = state.notifiedMenus.filter((i) => i !== index);
+        notifiedMenus.value = notifiedMenus.value.filter((i) => i !== index);
     }
 
     return {
-        state,
-
         menuActiveIndex,
         notifiedMenus,
         shiftHeld,

src/stores/user.js

@@ -1,6 +1,6 @@
 import Noty from 'noty';
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { ref, computed, reactive, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import * as workerTimers from 'worker-timers';
 import {
@@ -67,8 +67,7 @@ export const useUserStore = defineStore('User', () => {
     const photonStore = usePhotonStore();
     const sharedFeedStore = useSharedFeedStore();
 
-    const state = reactive({
+    const currentUser = ref({
-        currentUser: {
         acceptedPrivacyVersion: 0,
         acceptedTOSVersion: 0,
         accountDeletionDate: null,
@@ -170,9 +169,9 @@ export const useUserStore = defineStore('User', () => {
         $languages: [],
         $locationTag: '',
         $travelingToLocation: ''
-        },
+    });
-        currentTravelers: new Map(),
+
-        userDialog: {
+    const userDialog = ref({
         visible: false,
         loading: false,
         id: '',
@@ -257,16 +256,17 @@ export const useUserStore = defineStore('User', () => {
         dateFriended: '',
         unFriended: false,
         dateFriendedInfo: []
-        },
+    });
-        showUserDialogHistory: new Set(),
+
-        subsetOfLanguages: [],
+    const currentTravelers = ref(new Map());
-        languageDialog: {
+    const subsetOfLanguages = ref([]);
+    const languageDialog = ref({
         visible: false,
         loading: false,
         languageChoice: false,
         languages: []
-        },
+    });
-        pastDisplayNameTable: {
+    const pastDisplayNameTable = ref({
         data: [],
         tableProps: {
             stripe: true,
@@ -275,11 +275,13 @@ export const useUserStore = defineStore('User', () => {
                 prop: 'updated_at',
                 order: 'descending'
             }
-            },
+        }
-            layout: 'table'
+    });
-        },
+    const showUserDialogHistory = ref(new Set());
+    const customUserTags = ref(new Map());
+
+    const state = reactive({
         instancePlayerCount: new Map(),
-        customUserTags: new Map(),
         lastNoteCheck: null,
         lastDbNoteDate: null,
         notes: new Map()
@@ -288,76 +290,20 @@ export const useUserStore = defineStore('User', () => {
     const cachedUsers = new Map();
 
     const isLocalUserVrcPlusSupporter = computed(
-        () => state.currentUser.$isVRCPlus
+        () => currentUser.value.$isVRCPlus
     );
 
-    const currentUser = computed({
-        get: () => state.currentUser,
-        set: (value) => {
-            state.currentUser = value;
-        }
-    });
-
-    const currentTravelers = computed({
-        get: () => state.currentTravelers,
-        set: (value) => {
-            state.currentTravelers = value;
-        }
-    });
-
-    const userDialog = computed({
-        get: () => state.userDialog,
-        set: (value) => {
-            state.userDialog = value;
-        }
-    });
-
-    const subsetOfLanguages = computed({
-        get: () => state.subsetOfLanguages,
-        set: (value) => {
-            state.subsetOfLanguages = value;
-        }
-    });
-
-    const languageDialog = computed({
-        get: () => state.languageDialog,
-        set: (value) => {
-            state.languageDialog = value;
-        }
-    });
-
-    const pastDisplayNameTable = computed({
-        get: () => state.pastDisplayNameTable,
-        set: (value) => {
-            state.pastDisplayNameTable = value;
-        }
-    });
-
-    const showUserDialogHistory = computed({
-        get: () => state.showUserDialogHistory,
-        set: (value) => {
-            state.showUserDialogHistory = value;
-        }
-    });
-
-    const customUserTags = computed({
-        get: () => state.customUserTags,
-        set: (value) => {
-            state.customUserTags = value;
-        }
-    });
-
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
             if (!isLoggedIn) {
-                state.currentTravelers.clear();
+                currentTravelers.value.clear();
-                state.showUserDialogHistory.clear();
+                showUserDialogHistory.value.clear();
                 state.instancePlayerCount.clear();
-                state.customUserTags.clear();
+                customUserTags.value.clear();
                 state.notes.clear();
-                state.pastDisplayNameTable.data = [];
+                pastDisplayNameTable.value.data = [];
-                state.subsetOfLanguages = [];
+                subsetOfLanguages.value = [];
             }
         },
         { flush: 'sync' }
@@ -392,7 +338,7 @@ export const useUserStore = defineStore('User', () => {
         if (!languages) {
             return;
         }
-        state.subsetOfLanguages = languages;
+        subsetOfLanguages.value = languages;
         const data = [];
         for (const key in languages) {
             const value = languages[key];
@@ -401,7 +347,7 @@ export const useUserStore = defineStore('User', () => {
                 value
             });
         }
-        state.languageDialog.languages = data;
+        languageDialog.value.languages = data;
     }
 
     /**
@@ -409,7 +355,7 @@ export const useUserStore = defineStore('User', () => {
      * @param {object} ref
      */
     function applyUserLanguage(ref) {
-        if (!ref || !ref.tags || !state.subsetOfLanguages) {
+        if (!ref || !ref.tags || !subsetOfLanguages.value) {
             return;
         }
 
@@ -420,7 +366,7 @@ export const useUserStore = defineStore('User', () => {
         for (const tag of ref.tags) {
             if (tag.startsWith(languagePrefix)) {
                 const key = tag.substring(prefixLength);
-                const value = state.subsetOfLanguages[key];
+                const value = subsetOfLanguages.value[key];
 
                 if (value !== undefined) {
                     ref.$languages.push({ key, value });
@@ -549,7 +495,7 @@ export const useUserStore = defineStore('User', () => {
                 ref.$location_at = player.joinTime;
                 ref.$online_for = player.joinTime;
             }
-            if (ref.isFriend || ref.id === state.currentUser.id) {
+            if (ref.isFriend || ref.id === currentUser.value.id) {
                 // update instancePlayerCount
                 let newCount = state.instancePlayerCount.get(ref.location);
                 if (typeof newCount === 'undefined') {
@@ -558,7 +504,7 @@ export const useUserStore = defineStore('User', () => {
                 newCount++;
                 state.instancePlayerCount.set(ref.location, newCount);
             }
-            const tag = state.customUserTags.get(json.id);
+            const tag = customUserTags.value.get(json.id);
             if (tag) {
                 ref.$customTag = tag.tag;
                 ref.$customTagColour = tag.colour;
@@ -630,22 +576,22 @@ export const useUserStore = defineStore('User', () => {
         if (ref.location === 'traveling') {
             ref.$location = parseLocation(ref.travelingToLocation);
             if (
-                !state.currentTravelers.has(ref.id) &&
+                !currentTravelers.value.has(ref.id) &&
                 ref.travelingToLocation
             ) {
                 const travelRef = {
                     created_at: new Date().toJSON(),
                     ...ref
                 };
-                state.currentTravelers.set(ref.id, travelRef);
+                currentTravelers.value.set(ref.id, travelRef);
                 sharedFeedStore.sharedFeed.pendingUpdate = true;
                 sharedFeedStore.updateSharedFeed(false);
                 onPlayerTraveling(travelRef);
             }
         } else {
             ref.$location = parseLocation(ref.location);
-            if (state.currentTravelers.has(ref.id)) {
+            if (currentTravelers.value.has(ref.id)) {
-                state.currentTravelers.delete(ref.id);
+                currentTravelers.value.delete(ref.id);
                 sharedFeedStore.sharedFeed.pendingUpdate = true;
                 sharedFeedStore.updateSharedFeed(false);
             }
@@ -682,9 +628,9 @@ export const useUserStore = defineStore('User', () => {
             friendCtx.ref = ref;
             friendCtx.name = ref.displayName;
         }
-        if (ref.id === state.currentUser.id) {
+        if (ref.id === currentUser.value.id) {
             if (ref.status) {
-                state.currentUser.status = ref.status;
+                currentUser.value.status = ref.status;
             }
             locationStore.updateCurrentUserLocation();
         }
@@ -728,7 +674,7 @@ export const useUserStore = defineStore('User', () => {
         }
         favoriteStore.applyFavorite('friend', ref.id);
         friendStore.userOnFriend(ref);
-        const D = state.userDialog;
+        const D = userDialog.value;
         if (D.visible && D.id === ref.id) {
             D.ref = ref;
             D.note = String(ref.note || '');
@@ -772,7 +718,7 @@ export const useUserStore = defineStore('User', () => {
         if (!userId) {
             return;
         }
-        const D = state.userDialog;
+        const D = userDialog.value;
         D.id = userId;
         D.treeData = [];
         D.memo = '';
@@ -834,8 +780,8 @@ export const useUserStore = defineStore('User', () => {
         D.dateFriended = '';
         D.unFriended = false;
         D.dateFriendedInfo = [];
-        if (userId === state.currentUser.id) {
+        if (userId === currentUser.value.id) {
-            getWorldName(state.currentUser.homeLocation).then((worldName) => {
+            getWorldName(currentUser.value.homeLocation).then((worldName) => {
                 D.$homeLocationName = worldName;
             });
         }
@@ -869,7 +815,7 @@ export const useUserStore = defineStore('User', () => {
                         for (const ref of moderationStore.cachedPlayerModerations.values()) {
                             if (
                                 ref.targetUserId === D.id &&
-                                ref.sourceUserId === state.currentUser.id
+                                ref.sourceUserId === currentUser.value.id
                             ) {
                                 if (ref.type === 'block') {
                                     D.isBlock = true;
@@ -898,7 +844,7 @@ export const useUserStore = defineStore('User', () => {
                         ) {
                             inCurrentWorld = true;
                         }
-                        if (userId !== state.currentUser.id) {
+                        if (userId !== currentUser.value.id) {
                             database
                                 .getUserStats(D.ref, inCurrentWorld)
                                 .then((ref1) => {
@@ -962,7 +908,7 @@ export const useUserStore = defineStore('User', () => {
                                     );
                                 });
                             AppApi.GetVRChatUserModeration(
-                                state.currentUser.id,
+                                currentUser.value.id,
                                 userId
                             ).then((result) => {
                                 D.avatarModeration = result;
@@ -992,8 +938,8 @@ export const useUserStore = defineStore('User', () => {
                     });
                 }
             });
-        state.showUserDialogHistory.delete(userId);
+        showUserDialogHistory.value.delete(userId);
-        state.showUserDialogHistory.add(userId);
+        showUserDialogHistory.value.add(userId);
         searchStore.quickSearchItems = searchStore.quickSearchUserHistory();
     }
 
@@ -1006,7 +952,7 @@ export const useUserStore = defineStore('User', () => {
             !gameStore.isGameRunning ||
             !locationStore.lastLocation.location ||
             locationStore.lastLocation.location !== ref.travelingToLocation ||
-            ref.id === state.currentUser.id ||
+            ref.id === currentUser.value.id ||
             locationStore.lastLocation.playerList.has(ref.id)
         ) {
             return;
@@ -1029,7 +975,7 @@ export const useUserStore = defineStore('User', () => {
         let addUser;
         let friend;
         let ref;
-        const D = state.userDialog;
+        const D = userDialog.value;
         if (!D.visible) {
             return;
         }
@@ -1063,10 +1009,10 @@ export const useUserStore = defineStore('User', () => {
         const users = [];
         let friendCount = 0;
         const playersInInstance = locationStore.lastLocation.playerList;
-        const cachedCurrentUser = cachedUsers.get(state.currentUser.id);
+        const cachedCurrentUser = cachedUsers.get(currentUser.value.id);
         const currentLocation = cachedCurrentUser.$location.tag;
         if (!L.isOffline && currentLocation === L.tag) {
-            ref = cachedUsers.get(state.currentUser.id);
+            ref = cachedUsers.get(currentUser.value.id);
             if (typeof ref !== 'undefined') {
                 users.push(ref); // add self
             }
@@ -1149,7 +1095,7 @@ export const useUserStore = defineStore('User', () => {
     }
 
     function sortUserDialogAvatars(array) {
-        const D = state.userDialog;
+        const D = userDialog.value;
         if (D.avatarSorting === 'update') {
             array.sort(compareByUpdatedAt);
         } else {
@@ -1159,7 +1105,7 @@ export const useUserStore = defineStore('User', () => {
     }
 
     function refreshUserDialogAvatars(fileId) {
-        const D = state.userDialog;
+        const D = userDialog.value;
         if (D.isAvatarsLoading) {
             return;
         }
@@ -1215,10 +1161,10 @@ export const useUserStore = defineStore('User', () => {
     }
 
     function refreshUserDialogTreeData() {
-        const D = state.userDialog;
+        const D = userDialog.value;
-        if (D.id === state.currentUser.id) {
+        if (D.id === currentUser.value.id) {
             const treeData = {
-                ...state.currentUser,
+                ...currentUser.value,
                 ...D.ref
             };
             D.treeData = buildTreeData(treeData);
@@ -1290,8 +1236,8 @@ export const useUserStore = defineStore('User', () => {
             const previousLocationL = parseLocation(previousLocation);
             const newLocationL = parseLocation(newLocation);
             if (
-                previousLocationL.tag === state.userDialog.$location.tag ||
+                previousLocationL.tag === userDialog.value.$location.tag ||
-                newLocationL.tag === state.userDialog.$location.tag
+                newLocationL.tag === userDialog.value.$location.tag
             ) {
                 // update user dialog instance occupants
                 applyUserDialogLocation(true);
@@ -1593,7 +1539,7 @@ export const useUserStore = defineStore('User', () => {
             withCompany = locationStore.lastLocation.friendList.size >= 1;
         }
 
-        const currentStatus = state.currentUser.status;
+        const currentStatus = currentUser.value.status;
         const newStatus = withCompany
             ? generalSettingsStore.autoStateChangeCompanyStatus
             : generalSettingsStore.autoStateChangeAloneStatus;
@@ -1622,12 +1568,12 @@ export const useUserStore = defineStore('User', () => {
 
     function addCustomTag(data) {
         if (data.Tag) {
-            state.customUserTags.set(data.UserId, {
+            customUserTags.value.set(data.UserId, {
                 tag: data.Tag,
                 colour: data.TagColour
             });
         } else {
-            state.customUserTags.delete(data.UserId);
+            customUserTags.value.delete(data.UserId);
         }
         const feedUpdate = {
             userId: data.UserId,
@@ -1769,7 +1715,7 @@ export const useUserStore = defineStore('User', () => {
      */
     function applyCurrentUser(json) {
         authStore.attemptingAutoLogin = false;
-        let ref = state.currentUser;
+        let ref = currentUser.value;
         if (watchState.isLoggedIn) {
             if (json.currentAvatar !== ref.currentAvatar) {
                 avatarStore.addAvatarToHistory(json.currentAvatar);
@@ -1893,7 +1839,7 @@ export const useUserStore = defineStore('User', () => {
                 ref.$previousAvatarSwapTime = Date.now();
             }
             cachedUsers.clear(); // clear before running applyUser
-            state.currentUser = ref;
+            currentUser.value = ref;
             authStore.loginComplete();
         }
 
@@ -1908,16 +1854,16 @@ export const useUserStore = defineStore('User', () => {
         if (ref.homeLocation !== ref.$homeLocation?.tag) {
             ref.$homeLocation = parseLocation(ref.homeLocation);
             // apply home location name to user dialog
-            if (state.userDialog.visible && state.userDialog.id === ref.id) {
+            if (userDialog.value.visible && userDialog.value.id === ref.id) {
-                getWorldName(state.currentUser.homeLocation).then(
+                getWorldName(currentUser.value.homeLocation).then(
                     (worldName) => {
-                        state.userDialog.$homeLocationName = worldName;
+                        userDialog.value.$homeLocationName = worldName;
                     }
                 );
             }
         }
         if (ref.pastDisplayNames) {
-            state.pastDisplayNameTable.data = ref.pastDisplayNames;
+            pastDisplayNameTable.value.data = ref.pastDisplayNames;
         }
 
         // when isGameRunning use gameLog instead of API
@@ -1994,16 +1940,16 @@ export const useUserStore = defineStore('User', () => {
             travelingToInstance,
             travelingToWorld
 
-            // $online_for: state.currentUser.$online_for,
+            // $online_for: currentUser.value.$online_for,
-            // $offline_for: state.currentUser.$offline_for,
+            // $offline_for: currentUser.value.$offline_for,
-            // $location_at: state.currentUser.$location_at,
+            // $location_at: currentUser.value.$location_at,
-            // $travelingToTime: state.currentUser.$travelingToTime
+            // $travelingToTime: currentUser.value.$travelingToTime
         });
         // set VRCX online/offline timers
-        userRef.$online_for = state.currentUser.$online_for;
+        userRef.$online_for = currentUser.value.$online_for;
-        userRef.$offline_for = state.currentUser.$offline_for;
+        userRef.$offline_for = currentUser.value.$offline_for;
-        userRef.$location_at = state.currentUser.$location_at;
+        userRef.$location_at = currentUser.value.$location_at;
-        userRef.$travelingToTime = state.currentUser.$travelingToTime;
+        userRef.$travelingToTime = currentUser.value.$travelingToTime;
         if (json.presence?.platform) {
             userRef.platform = json.presence.platform;
         }

src/stores/vr.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { reactive, watch } from 'vue';
+import { watch } from 'vue';
 import { isRpcWorld } from '../shared/utils';
 import { watchState } from '../service/watchState';
 import { useFriendStore } from './friend';
@@ -27,8 +27,6 @@ export const useVrStore = defineStore('Vr', () => {
     const userStore = useUserStore();
     const sharedFeedStore = useSharedFeedStore();
 
-    const state = reactive({});
-
     watch(
         () => watchState.isFriendsLoaded,
         (isFriendsLoaded) => {
@@ -178,8 +176,6 @@ export const useVrStore = defineStore('Vr', () => {
     }
 
     return {
-        state,
-
         vrInit,
         saveOpenVROption,
         updateVrNowPlaying,

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,
+        externalNotifierVersion: 0
-        ipcEnabled: false,
-        externalNotifierVersion: 0,
-        currentlyDroppingFile: null,
-        isRegistryBackupDialogVisible: false
     });
 
+    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) {
+        if (maxTableSize.value > 10000) {
-            state.maxTableSize = 1000;
+            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() {

src/stores/vrcxUpdater.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive } from 'vue';
+import { computed, ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import * as workerTimers from 'worker-timers';
 import configRepository from '../service/config';
@@ -13,53 +13,51 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
     const uiStore = useUiStore();
     const { t } = useI18n();
 
-    const state = reactive({
+    const arch = ref('x64');
-        arch: 'x64',
+
-        appVersion: '',
+    const appVersion = ref('');
-        autoUpdateVRCX: 'Auto Download',
+    const autoUpdateVRCX = ref('Auto Download');
-        latestAppVersion: '',
+    const latestAppVersion = ref('');
-        branch: 'Stable',
+    const branch = ref('Stable');
-        vrcxId: '',
+    const vrcxId = ref('');
-        checkingForVRCXUpdate: false,
+    const checkingForVRCXUpdate = ref(false);
-        VRCXUpdateDialog: {
+    const VRCXUpdateDialog = ref({
         visible: false,
         updatePending: false,
         updatePendingIsLatest: false,
         release: '',
         releases: []
-        },
+    });
-        changeLogDialog: {
+    const changeLogDialog = ref({
         visible: false,
         buildName: '',
         changeLog: ''
-        },
-        pendingVRCXUpdate: false,
-        pendingVRCXInstall: '',
-
-        updateInProgress: false,
-        updateProgress: 0
     });
+    const pendingVRCXUpdate = ref(false);
+    const pendingVRCXInstall = ref('');
+    const updateInProgress = ref(false);
+    const updateProgress = ref(0);
 
     async function initVRCXUpdaterSettings() {
         if (!WINDOWS) {
-            const arch = await window.electron.getArch();
+            const archResult = await window.electron.getArch();
-            console.log('Architecture:', arch);
+            console.log('Architecture:', archResult);
-            state.arch = arch;
+            arch.value = archResult;
         }
 
-        const [autoUpdateVRCX, vrcxId] = await Promise.all([
+        const [VRCX_autoUpdateVRCX, VRCX_id] = await Promise.all([
             configRepository.getString('VRCX_autoUpdateVRCX', 'Auto Download'),
             configRepository.getString('VRCX_id', '')
         ]);
 
-        if (autoUpdateVRCX === 'Auto Install') {
+        if (VRCX_autoUpdateVRCX === 'Auto Install') {
-            state.autoUpdateVRCX = 'Auto Download';
+            autoUpdateVRCX.value = 'Auto Download';
         } else {
-            state.autoUpdateVRCX = autoUpdateVRCX;
+            autoUpdateVRCX.value = VRCX_autoUpdateVRCX;
         }
 
-        state.appVersion = await AppApi.GetVersion();
+        appVersion.value = await AppApi.GetVersion();
-        state.vrcxId = vrcxId;
+        vrcxId.value = VRCX_id;
 
         await initBranch();
         await loadVrcxId();
@@ -67,101 +65,49 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
         if (await compareAppVersion()) {
             showChangeLogDialog();
         }
-        if (state.autoUpdateVRCX !== 'Off') {
+        if (autoUpdateVRCX.value !== 'Off') {
             await checkForVRCXUpdate();
         }
     }
 
-    const appVersion = computed(() => state.appVersion);
-    const autoUpdateVRCX = computed(() => state.autoUpdateVRCX);
-    const latestAppVersion = computed(() => state.latestAppVersion);
-    const branch = computed({
-        get: () => state.branch,
-        set: (value) => {
-            state.branch = value;
-        }
-    });
     const currentVersion = computed(() =>
-        state.appVersion.replace(' (Linux)', '')
+        appVersion.value.replace(' (Linux)', '')
     );
-    const vrcxId = computed(() => state.vrcxId);
-    const checkingForVRCXUpdate = computed({
-        get: () => state.checkingForVRCXUpdate,
-        set: (value) => {
-            state.checkingForVRCXUpdate = value;
-        }
-    });
-    const VRCXUpdateDialog = computed({
-        get: () => state.VRCXUpdateDialog,
-        set: (value) => {
-            state.VRCXUpdateDialog = { ...state.VRCXUpdateDialog, ...value };
-        }
-    });
-    const changeLogDialog = computed({
-        get: () => state.changeLogDialog,
-        set: (value) => {
-            state.changeLogDialog = value;
-        }
-    });
-    const pendingVRCXUpdate = computed({
-        get: () => state.pendingVRCXUpdate,
-        set: (value) => {
-            state.pendingVRCXUpdate = value;
-        }
-    });
-    const pendingVRCXInstall = computed({
-        get: () => state.pendingVRCXInstall,
-        set: (value) => {
-            state.pendingVRCXInstall = value;
-        }
-    });
-    const updateInProgress = computed({
-        get: () => state.updateInProgress,
-        set: (value) => {
-            state.updateInProgress = value;
-        }
-    });
-    const updateProgress = computed({
-        get: () => state.updateProgress,
-        set: (value) => {
-            state.updateProgress = value;
-        }
-    });
 
     /**
      * @param {string} value
      */
     async function setAutoUpdateVRCX(value) {
         if (value === 'Off') {
-            state.pendingVRCXUpdate = false;
+            pendingVRCXUpdate.value = false;
         }
-        state.autoUpdateVRCX = value;
+        autoUpdateVRCX.value = value;
         await configRepository.setString('VRCX_autoUpdateVRCX', value);
     }
     /**
      * @param {string} value
      */
     function setLatestAppVersion(value) {
-        state.latestAppVersion = value;
+        latestAppVersion.value = value;
     }
     /**
      * @param {string} value
      */
     function setBranch(value) {
-        state.branch = value;
+        branch.value = value;
         configRepository.setString('VRCX_branch', value);
     }
 
     async function initBranch() {
-        if (!state.appVersion) {
+        if (!appVersion.value) {
             return;
         }
         if (currentVersion.value.includes('VRCX Nightly')) {
-            state.branch = 'Nightly';
+            branch.value = 'Nightly';
         } else {
-            state.branch = 'Stable';
+            branch.value = 'Stable';
         }
-        await configRepository.setString('VRCX_branch', state.branch);
+        await configRepository.setString('VRCX_branch', branch.value);
     }
 
     async function compareAppVersion() {
@@ -174,14 +120,14 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
                 'VRCX_lastVRCXVersion',
                 currentVersion.value
             );
-            return state.branch === 'Stable' && lastVersion;
+            return branch.value === 'Stable' && lastVersion;
         }
         return false;
     }
     async function loadVrcxId() {
-        if (!state.vrcxId) {
+        if (!vrcxId.value) {
-            state.vrcxId = crypto.randomUUID();
+            vrcxId.value = crypto.randomUUID();
-            await configRepository.setString('VRCX_id', state.vrcxId);
+            await configRepository.setString('VRCX_id', vrcxId.value);
         }
     }
     function getAssetOfInterest(assets) {
@@ -207,7 +153,7 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
             }
             if (
                 LINUX &&
-                asset.name.endsWith(`${state.arch}.AppImage`) &&
+                asset.name.endsWith(`${arch.value}.AppImage`) &&
                 asset.content_type === 'application/octet-stream'
             ) {
                 downloadUrl = asset.browser_download_url;
@@ -229,42 +175,42 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
             // ignore custom builds
             return;
         }
-        if (state.branch === 'Beta') {
+        if (branch.value === 'Beta') {
             // move Beta users to stable
             setBranch('Stable');
         }
-        if (typeof branches[state.branch] === 'undefined') {
+        if (typeof branches[branch.value] === 'undefined') {
             // handle invalid branch
             setBranch('Stable');
         }
-        const url = branches[state.branch].urlLatest;
+        const url = branches[branch.value].urlLatest;
-        state.checkingForVRCXUpdate = true;
+        checkingForVRCXUpdate.value = true;
         let response;
         try {
             response = await webApiService.execute({
                 url,
                 method: 'GET',
                 headers: {
-                    'VRCX-ID': state.vrcxId
+                    'VRCX-ID': vrcxId.value
                 }
             });
         } finally {
-            state.checkingForVRCXUpdate = false;
+            checkingForVRCXUpdate.value = false;
         }
-        state.pendingVRCXUpdate = false;
+        pendingVRCXUpdate.value = false;
         const json = JSON.parse(response.data);
         if (AppDebug.debugWebRequests) {
             console.log(json, response);
         }
         if (json === Object(json) && json.name && json.published_at) {
-            state.changeLogDialog.buildName = json.name;
+            changeLogDialog.value.buildName = json.name;
-            state.changeLogDialog.changeLog = changeLogRemoveLinks(json.body);
+            changeLogDialog.value.changeLog = changeLogRemoveLinks(json.body);
             const releaseName = json.name;
             setLatestAppVersion(releaseName);
-            state.VRCXUpdateDialog.updatePendingIsLatest = false;
+            VRCXUpdateDialog.value.updatePendingIsLatest = false;
-            if (releaseName === state.pendingVRCXInstall) {
+            if (releaseName === pendingVRCXInstall.value) {
                 // update already downloaded
-                state.VRCXUpdateDialog.updatePendingIsLatest = true;
+                VRCXUpdateDialog.value.updatePendingIsLatest = true;
             } else if (releaseName > currentVersion.value) {
                 const { downloadUrl, hashString, size } = getAssetOfInterest(
                     json.assets
@@ -272,11 +218,11 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
                 if (!downloadUrl) {
                     return;
                 }
-                state.pendingVRCXUpdate = true;
+                pendingVRCXUpdate.value = true;
                 uiStore.notifyMenu('settings');
-                if (state.autoUpdateVRCX === 'Notify') {
+                if (autoUpdateVRCX.value === 'Notify') {
                     // this.showVRCXUpdateDialog();
-                } else if (state.autoUpdateVRCX === 'Auto Download') {
+                } else if (autoUpdateVRCX.value === 'Auto Download') {
                     await downloadVRCXUpdate(
                         downloadUrl,
                         hashString,
@@ -288,31 +234,31 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
         }
     }
     async function showVRCXUpdateDialog() {
-        const D = state.VRCXUpdateDialog;
+        const D = VRCXUpdateDialog.value;
         D.visible = true;
         D.updatePendingIsLatest = false;
         D.updatePending = await AppApi.CheckForUpdateExe();
-        if (state.updateInProgress) {
+        if (updateInProgress.value) {
             return;
         }
         await loadBranchVersions();
     }
 
     async function loadBranchVersions() {
-        const D = state.VRCXUpdateDialog;
+        const D = VRCXUpdateDialog.value;
-        const url = branches[state.branch].urlReleases;
+        const url = branches[branch.value].urlReleases;
-        state.checkingForVRCXUpdate = true;
+        checkingForVRCXUpdate.value = true;
         let response;
         try {
             response = await webApiService.execute({
                 url,
                 method: 'GET',
                 headers: {
-                    'VRCX-ID': state.vrcxId
+                    'VRCX-ID': vrcxId.value
                 }
             });
         } finally {
-            state.checkingForVRCXUpdate = false;
+            checkingForVRCXUpdate.value = false;
         }
         const json = JSON.parse(response.data);
         if (AppDebug.debugWebRequests) {
@@ -341,12 +287,12 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
         }
         D.releases = releases;
         D.release = json[0].name;
-        state.VRCXUpdateDialog.updatePendingIsLatest = false;
+        VRCXUpdateDialog.value.updatePendingIsLatest = false;
-        if (D.release === state.pendingVRCXInstall) {
+        if (D.release === pendingVRCXInstall.value) {
             // update already downloaded and latest version
-            state.VRCXUpdateDialog.updatePendingIsLatest = true;
+            VRCXUpdateDialog.value.updatePendingIsLatest = true;
         }
-        setBranch(state.branch);
+        setBranch(branch.value);
     }
     async function downloadVRCXUpdate(
         downloadUrl,
@@ -354,14 +300,14 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
         size,
         releaseName
     ) {
-        if (state.updateInProgress) {
+        if (updateInProgress.value) {
             return;
         }
         try {
-            state.updateInProgress = true;
+            updateInProgress.value = true;
             await downloadFileProgress();
             await AppApi.DownloadUpdate(downloadUrl, hashString, size);
-            state.pendingVRCXInstall = releaseName;
+            pendingVRCXInstall.value = releaseName;
         } catch (err) {
             console.error(err);
             ElMessage({
@@ -369,19 +315,19 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
                 type: 'error'
             });
         } finally {
-            state.updateInProgress = false;
+            updateInProgress.value = false;
-            state.updateProgress = 0;
+            updateProgress.value = 0;
         }
     }
     async function downloadFileProgress() {
-        state.updateProgress = await AppApi.CheckUpdateProgress();
+        updateProgress.value = await AppApi.CheckUpdateProgress();
-        if (state.updateInProgress) {
+        if (updateInProgress.value) {
             workerTimers.setTimeout(() => downloadFileProgress(), 150);
         }
     }
     function installVRCXUpdate() {
-        for (const release of state.VRCXUpdateDialog.releases) {
+        for (const release of VRCXUpdateDialog.value.releases) {
-            if (release.name !== state.VRCXUpdateDialog.release) {
+            if (release.name !== VRCXUpdateDialog.value.release) {
                 continue;
             }
             const { downloadUrl, hashString, size } = getAssetOfInterest(
@@ -396,7 +342,7 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
         }
     }
     function showChangeLogDialog() {
-        state.changeLogDialog.visible = true;
+        changeLogDialog.value.visible = true;
         checkForVRCXUpdate();
     }
     function restartVRCX(isUpgrade) {
@@ -407,22 +353,20 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
         }
     }
     function updateProgressText() {
-        if (state.updateProgress === 100) {
+        if (updateProgress.value === 100) {
             return t('message.vrcx_updater.checking_hash');
         }
-        return `${state.updateProgress}%`;
+        return `${updateProgress.value}%`;
     }
     async function cancelUpdate() {
         await AppApi.CancelUpdate();
-        state.updateInProgress = false;
+        updateInProgress.value = false;
-        state.updateProgress = 0;
+        updateProgress.value = 0;
     }
 
     initVRCXUpdaterSettings();
 
     return {
-        state,
-
         appVersion,
         autoUpdateVRCX,
         latestAppVersion,

src/stores/world.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { reactive, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import { instanceRequest, miscRequest, worldRequest } from '../api';
 import { database } from '../service/database';
@@ -23,8 +23,8 @@ export const useWorldStore = defineStore('World', () => {
     const favoriteStore = useFavoriteStore();
     const instanceStore = useInstanceStore();
     const userStore = useUserStore();
-    const state = reactive({
+
-        worldDialog: {
+    const worldDialog = reactive({
         visible: false,
         loading: false,
         id: '',
@@ -50,22 +50,14 @@ export const useWorldStore = defineStore('World', () => {
         isQuest: false,
         isIos: false,
         hasPersistData: false
-        }
     });
 
     let cachedWorlds = new Map();
 
-    const worldDialog = computed({
-        get: () => state.worldDialog,
-        set: (value) => {
-            state.worldDialog = value;
-        }
-    });
-
     watch(
         () => watchState.isLoggedIn,
         () => {
-            state.worldDialog.visible = false;
+            worldDialog.visible = false;
             cachedWorlds.clear();
         },
         { flush: 'sync' }
@@ -77,7 +69,7 @@ export const useWorldStore = defineStore('World', () => {
      * @param {string} shortName
      */
     function showWorldDialog(tag, shortName = null) {
-        const D = state.worldDialog;
+        const D = worldDialog;
         const L = parseLocation(tag);
         if (L.worldId === '') {
             return;
@@ -177,10 +169,10 @@ export const useWorldStore = defineStore('World', () => {
                         })
                         .then((args) => {
                             if (
-                                args.params.worldId === state.worldDialog.id &&
+                                args.params.worldId === worldDialog.id &&
-                                state.worldDialog.visible
+                                worldDialog.visible
                             ) {
-                                state.worldDialog.hasPersistData =
+                                worldDialog.hasPersistData =
                                     args.json !== false;
                             }
                         });
@@ -205,7 +197,7 @@ export const useWorldStore = defineStore('World', () => {
     }
 
     function updateVRChatWorldCache() {
-        const D = state.worldDialog;
+        const D = worldDialog;
         if (D.visible) {
             D.inCache = false;
             D.cacheSize = '';
@@ -287,7 +279,6 @@ export const useWorldStore = defineStore('World', () => {
         if (userDialog.visible && userDialog.$location.worldId === ref.id) {
             userStore.applyUserDialogLocation();
         }
-        const worldDialog = state.worldDialog;
         if (worldDialog.visible && worldDialog.id === ref.id) {
             worldDialog.ref = ref;
             worldDialog.avatarScalingDisabled = ref.tags?.includes(
@@ -319,8 +310,6 @@ export const useWorldStore = defineStore('World', () => {
     }
 
     return {
-        state,
-
         worldDialog,
         cachedWorlds,
         showWorldDialog,