diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-27 15:08:35 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-27 15:08:35 +0300 |
commit | 22e9af3c8b8aedf7f46b786be968862b74a2d07e (patch) | |
tree | a10a7d9af40a17fe6cda7b3a681f5e5e2112c16e /doc/development/fe_guide | |
parent | c8e28a0bb8dd45d91cb72ff2c930bc4a562f1fc7 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'doc/development/fe_guide')
-rw-r--r-- | doc/development/fe_guide/vuex.md | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/doc/development/fe_guide/vuex.md b/doc/development/fe_guide/vuex.md index 20abf4fcb3e..0bb9e3b7d50 100644 --- a/doc/development/fe_guide/vuex.md +++ b/doc/development/fe_guide/vuex.md @@ -396,3 +396,93 @@ export default () => {}; ``` [vuex-docs]: https://vuex.vuejs.org + +### Two way data binding + +When storing form data in Vuex, it is sometimes necessary to update the value stored. The store should never be mutated directly, and an action should be used instead. +In order to still use `v-model` in our code, we need to create computed properties in this form: + +```javascript +export default { + computed: { + someValue: { + get() { + return this.$store.state.someValue; + }, + set(value) { + this.$store.dispatch("setSomeValue", value); + } + } + } +}; +``` + +An alternative is to use `mapState` and `mapActions`: + +```javascript +export default { + computed: { + ...mapState(['someValue']), + localSomeValue: { + get() { + return this.someValue; + }, + set(value) { + this.setSomeValue(value) + } + } + }, + methods: { + ...mapActions(['setSomeValue']) + } +}; +``` + +Adding a few of these properties becomes cumbersome, and makes the code more repetitive with more tests to write. To simplify this there is a helper in `~/vuex_shared/bindings.js` + +The helper can be used like so: + +```javascript +// this store is non-functional and only used to give context to the example +export default { + state: { + baz: '', + bar: '', + foo: '' + }, + actions: { + updateBar() {...} + updateAll() {...} + }, + getters: { + getFoo() {...} + } +} +``` + +```javascript +import { mapComputed } from '~/vuex_shared/bindings' +export default { + computed: { + /** + * @param {(string[]|Object[])} list - list of string matching state keys or list objects + * @param {string} list[].key - the key matching the key present in the vuex state + * @param {string} list[].getter - the name of the getter, leave it empty to not use a getter + * @param {string} list[].updateFn - the name of the action, leave it empty to use the default action + * @param {string} defaultUpdateFn - the default function to dispatch + * @param {string} root - optional key of the state where to search fo they keys described in list + * @returns {Object} a dictionary with all the computed properties generated + */ + ...mapComputed( + [ + 'baz', + { key: 'bar', updateFn: 'updateBar' } + { key: 'foo', getter: 'getFoo' }, + ], + 'updateAll', + ), + } +} +``` + +`mapComputed` will then generate the appropriate computed properties that get the data from the store and dispatch the correct action when updated. |