Define directory structure and usage patterns for Vuex Modules in the Gitlab code base.

Problem we are trying to solve:

There are times where we have multiple vue apps that duplicate mutations, actions, and getters because they re-use the same vue components in different contexts.

Example Case:

The vuln modal ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue

is currently used in at least 4 different vue app contexts.

1.) Group security dashboard

ee/app/assets/javascripts/security_dashboard/components/app.vue

2.) Project level security dashboard

ee/app/assets/javascripts/vue_shared/security_reports/card_security_reports_app.vue

3.) Merge request widget

ee/app/assets/javascripts/vue_shared/security_reports/grouped_security_reports_app.vue

4.) Pipeline view

ee/app/assets/javascripts/vue_shared/security_reports/split_security_reports_app.vue

Relevant Issue: https://gitlab.com/gitlab-org/gitlab-ee/issues/8146

---

For each app context, we have duplicate, or similar vuex actions and mutations.

We should discuss some high level design patterns to reduce the code duplication, and feature deviation. Right now it's very difficult to add vuln modal functionality, because we then need to duplicate the vuex logic in 4 different places.

I ran into duplicate action/mutations issue when working on auto remediation as well as vuln dismissal reasons. ──────────

Proposal

It appears that Vuex modules would allow us to compose re-usable state, mutation, actions, and getters

https://vuex.vuejs.org/guide/modules.html

Create a directory under vue_shared/modules with the following subdirectory structure:

vue_shared/modules/FooModule/state.js

vue_shared/modules/FooModule/actions.js

vue_shared/modules/FooModule/mutations.js

vue_shared/modules/FooModule/getters.js