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, 6 insertions, 5 deletions

diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue
index 1ead1458e9..9fc08af1fc 100644
--- a/web_src/js/components/DiffFileTree.vue
+++ b/web_src/js/components/DiffFileTree.vue
@@ -5,7 +5,7 @@
   >
     <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
     <div class="ui list">
-      <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item" :selected-file="selectedFile"/>
+      <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/>
     </div>
     <div v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2">
       <span class="gt-mr-2">{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
@@ -17,6 +17,7 @@
 import DiffFileTreeItem from './DiffFileTreeItem.vue';
 import {doLoadMoreFiles} from '../features/repo-diff.js';
 import {toggleElem} from '../utils/dom.js';
+import {DiffTreeStore} from '../modules/stores.js';
 
 const {pageData} = window.config;
 const LOCAL_STORAGE_KEY = 'diff_file_tree_visible';
@@ -28,7 +29,7 @@ export default {
     pageData.diffFileInfo.fileTreeIsVisible = fileTreeIsVisible;
     return {
       ...pageData.diffFileInfo,
-      selectedFile: ''
+      store: DiffTreeStore,
     };
   },
   computed: {
@@ -102,10 +103,10 @@ export default {
     document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility);
 
     this.hashChangeListener = () => {
-      this.selectedFile = window.location.hash;
+      this.store.selectedItem = window.location.hash;
     };
-    this.hashListener = window.addEventListener('hashchange', this.hashChangeListener);
-    this.selectedFile = window.location.hash;
+    this.hashChangeListener();
+    window.addEventListener('hashchange', this.hashChangeListener);
   },
   unmounted() {
     document.querySelector('.diff-toggle-file-tree-button').removeEventListener('click', this.toggleVisibility);