Use reactive store to share data between components (#23996)

Follow #23947

* Use reactive store to share data between components
* Remove no-op `this.hashListener = window.addEventListener()` because
`addEventListener` returns void/undefined.

Reference:


https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api


Screenshot (the same as before):

<details>

<img width="565" alt="image"
src="https://user-images.githubusercontent.com/2114189/230701282-bd61bfa3-7786-433b-9ad8-a88591112a02.png">


</details>

---------

Co-authored-by: silverwind <me@silverwind.io>

1 files changed, 4 insertions, 10 deletions

diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 9fdb78875d..baaa01b782 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-show="show" :title="item.name">
     <!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"-->
-    <div class="item" :class="[item.isFile ? 'filewrapper gt-p-1 gt-ac' : '', selectedFile === genCompleteFileHash(item.file?.NameHash) ? 'selected' : '']">
+    <div class="item" :class="[item.isFile ? 'filewrapper gt-p-1 gt-ac' : '', store.selectedItem === '#diff-' + item.file?.NameHash ? 'selected' : '']">
       <!-- Files -->
       <SvgIcon
         v-if="item.isFile"
@@ -32,7 +32,7 @@
         <span class="gt-ellipsis">{{ item.name }}</span>
       </div>
       <div v-show="!collapsed">
-        <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list" :selected-file="selectedFile"/>
+        <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list"/>
       </div>
     </div>
   </div>
@@ -40,6 +40,7 @@
 
 <script>
 import {SvgIcon} from '../svg.js';
+import {DiffTreeStore} from '../modules/stores.js';
 
 export default {
   components: {SvgIcon},
@@ -53,13 +54,9 @@ export default {
       required: false,
       default: true
     },
-    selectedFile: {
-      type: String,
-      default: '',
-      required: true
-    }
   },
   data: () => ({
+    store: DiffTreeStore,
     collapsed: false,
   }),
   methods: {
@@ -79,9 +76,6 @@ export default {
       };
       return diffTypes[pType];
     },
-    genCompleteFileHash(hash) {
-      return `#diff-${hash}`;
-    }
   },
 };
 </script>