From 6892e2b8efff4465acd702e702d16f7aadd07187 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 12 Apr 2023 08:44:26 +0800 Subject: [PATCH] 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):
image
--------- Co-authored-by: silverwind --- web_src/js/components/DiffFileTree.vue | 11 ++++++----- web_src/js/components/DiffFileTreeItem.vue | 14 ++++---------- web_src/js/modules/stores.js | 5 +++++ 3 files changed, 15 insertions(+), 15 deletions(-) create mode 100644 web_src/js/modules/stores.js diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue index 1ead1458e..9fc08af1f 100644 --- a/web_src/js/components/DiffFileTree.vue +++ b/web_src/js/components/DiffFileTree.vue @@ -5,7 +5,7 @@ >
- +
{{ tooManyFilesMessage }}{{ showMoreMessage }} @@ -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); diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue index 9fdb78875..baaa01b78 100644 --- a/web_src/js/components/DiffFileTreeItem.vue +++ b/web_src/js/components/DiffFileTreeItem.vue @@ -1,7 +1,7 @@