Use vue merge object

Fix #88, #110

src/store/index.ts

@@ -1,4 +1,4 @@
-import { cloneDeep, merge, map, groupBy, sortBy } from 'lodash';
+import { merge, map, groupBy, sortBy } from 'lodash';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { computed, Ref } from '@vue/composition-api';
@@ -11,6 +11,7 @@ import { AllStateTypes } from '../consts';
 import { torrentIsState } from '../utils';
 import searchEngineStore from './searchEngine';
 import { RootState } from './types';
+import stateMerge from '@/utils/vue-object-merge';
 import api from '@/Api';
 
 Vue.use(Vuex);
@@ -39,20 +40,20 @@ const store = new Vuex.Store<RootState>({
         delete payload.full_update;
         state.mainData = payload;
       } else {
-        const tmp: any = cloneDeep(state.mainData);
+        const mainData = state.mainData!;
         if (payload.torrents_removed) {
           for (const hash of payload.torrents_removed) {
-            delete tmp.torrents[hash];
+            Vue.delete(mainData.torrents, hash);
           }
           delete payload.torrents_removed;
         }
         if (payload.categories_removed) {
           for (const key of payload.categories_removed) {
-            delete tmp.categories[key];
+            Vue.delete(mainData, key);
           }
           delete payload.categories_removed;
         }
-        state.mainData = merge(tmp, payload);
+        stateMerge(mainData, payload);
       }
     },
     updatePreferences(state, payload) {

src/utils/index.ts

@@ -1,5 +1,5 @@
-import { StateType } from './consts';
-import { Torrent } from './types';
+import { StateType } from '@/consts';
+import { Torrent } from '@/types';
 
 const dlState = ['downloading', 'metaDL', 'stalledDL', 'checkingDL', 'pausedDL', 'queuedDL', 'forcedDL', 'allocating'];
 const upState = ['uploading', 'stalledUP', 'checkingUP', 'queuedUP', 'forcedUP'];

src/utils/vue-object-merge.ts

@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import { isPlainObject } from 'lodash';
+
+// based on https://github.com/richardtallent/vue-object-merge/blob/main/index.js
+
+export const stateMerge = function(state: any, value: any, propName?: string, ignoreNull?: boolean) {
+	if (isPlainObject(state) && (propName == null || propName in state)) {
+		const o = propName == null ? state : state[propName];
+		if (o != null) {
+			for (const prop in value) {
+				stateMerge(o, value[prop], prop, ignoreNull);
+			}
+			return;
+		}
+	}
+	if (!ignoreNull || value !== null) Vue.set(state, propName!, value);
+
+    return state;
+};
+
+export default stateMerge;