ami/tl-vikunja
1
0
Fork 0
Code

fix(projects): trigger only single mutation

Browse Source 
Previously these store methods created multiple edits on deep objects in the store or edited a deep nested object directly.

This is bad because:
- multiple edits lead to multiple triggers of all the watchers on the project.
- in theory we should listen deep to a project if we use some deep reactive value of a project, if we want deep updates. Because this is easy to forget, it's better to update the project directly. For this the method `setProject` already existed in the store. This is no real overhead because Vue is smart enough to only trigger listeners that use data of the modified state.

By modifying only a copy of the view and submitting the modified result __once__ we can save us a lot of headache.

PS: I'm not sure if there were any visible problems, because Vue is really fast and the reactivity system works quite well. Regardless of this we should try not to modify state unnecessarily.
(cherry picked from commit 1e632397d29e9d45609b9271e00111c0a6cb2c57)
This commit is contained in:
Dominik Pschenitschni 2024-07-17 17:17:35 +02:00 committed by kolaente
parent dddba4d64a
commit 96884372b4
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
1 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/stores/projects.ts
View File

@ -218,25 +218,30 @@ export const useProjectStore = defineStore('project', () => {
}
function setProjectView(view: IProjectView) {
const viewPos = projects.value[view.projectId].views.findIndex(v => v.id === view.id)
const views = [...projects.value[view.projectId].views]
const viewPos = views.findIndex(v => v.id === view.id)
if (viewPos !== -1) {
projects.value[view.projectId].views[viewPos] = view
projects.value[view.projectId].views.sort((a, b) => a.position < b.position ? -1 : 1)
setProject(projects.value[view.projectId])
return
views[viewPos] = view
} else {
views.push(view)
}
views.sort((a, b) => a.position < b.position ? -1 : 1)
projects.value[view.projectId].views.push(view)
projects.value[view.projectId].views.sort((a, b) => a.position < b.position ? -1 : 1)
setProject(projects.value[view.projectId])
setProject({
...projects.value[view.projectId],
views,
})
}
function removeProjectView(projectId: IProject['id'], viewId: IProjectView['id']) {
const viewPos = projects.value[projectId].views.findIndex(v => v.id === viewId)
if (viewPos !== -1) {
projects.value[projectId].views.splice(viewPos, 1)
}
const project = projects.value[projectId]
const updatedViews = project.views.filter(v => v.id !== viewId)
setProject({
...project,
views: updatedViews,
})
}
return {