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>
This commit is contained in:
wxiaoguang 2023-04-12 08:44:26 +08:00 committed by GitHub
parent 1380b87311
commit 6892e2b8ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 15 deletions

View File

@ -5,7 +5,7 @@
> >
<!-- only render the tree if we're visible. in many cases this is something that doesn't change very often --> <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
<div class="ui list"> <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>
<div v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2"> <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> <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 DiffFileTreeItem from './DiffFileTreeItem.vue';
import {doLoadMoreFiles} from '../features/repo-diff.js'; import {doLoadMoreFiles} from '../features/repo-diff.js';
import {toggleElem} from '../utils/dom.js'; import {toggleElem} from '../utils/dom.js';
import {DiffTreeStore} from '../modules/stores.js';
const {pageData} = window.config; const {pageData} = window.config;
const LOCAL_STORAGE_KEY = 'diff_file_tree_visible'; const LOCAL_STORAGE_KEY = 'diff_file_tree_visible';
@ -28,7 +29,7 @@ export default {
pageData.diffFileInfo.fileTreeIsVisible = fileTreeIsVisible; pageData.diffFileInfo.fileTreeIsVisible = fileTreeIsVisible;
return { return {
...pageData.diffFileInfo, ...pageData.diffFileInfo,
selectedFile: '' store: DiffTreeStore,
}; };
}, },
computed: { computed: {
@ -102,10 +103,10 @@ export default {
document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility); document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility);
this.hashChangeListener = () => { this.hashChangeListener = () => {
this.selectedFile = window.location.hash; this.store.selectedItem = window.location.hash;
}; };
this.hashListener = window.addEventListener('hashchange', this.hashChangeListener); this.hashChangeListener();
this.selectedFile = window.location.hash; window.addEventListener('hashchange', this.hashChangeListener);
}, },
unmounted() { unmounted() {
document.querySelector('.diff-toggle-file-tree-button').removeEventListener('click', this.toggleVisibility); document.querySelector('.diff-toggle-file-tree-button').removeEventListener('click', this.toggleVisibility);

View File

@ -1,7 +1,7 @@
<template> <template>
<div v-show="show" :title="item.name"> <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"--> <!--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 --> <!-- Files -->
<SvgIcon <SvgIcon
v-if="item.isFile" v-if="item.isFile"
@ -32,7 +32,7 @@
<span class="gt-ellipsis">{{ item.name }}</span> <span class="gt-ellipsis">{{ item.name }}</span>
</div> </div>
<div v-show="!collapsed"> <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> </div>
</div> </div>
@ -40,6 +40,7 @@
<script> <script>
import {SvgIcon} from '../svg.js'; import {SvgIcon} from '../svg.js';
import {DiffTreeStore} from '../modules/stores.js';
export default { export default {
components: {SvgIcon}, components: {SvgIcon},
@ -53,13 +54,9 @@ export default {
required: false, required: false,
default: true default: true
}, },
selectedFile: {
type: String,
default: '',
required: true
}
}, },
data: () => ({ data: () => ({
store: DiffTreeStore,
collapsed: false, collapsed: false,
}), }),
methods: { methods: {
@ -79,9 +76,6 @@ export default {
}; };
return diffTypes[pType]; return diffTypes[pType];
}, },
genCompleteFileHash(hash) {
return `#diff-${hash}`;
}
}, },
}; };
</script> </script>

View File

@ -0,0 +1,5 @@
import {reactive} from 'vue';
export const DiffTreeStore = reactive({
selectedItem: '',
});