Commit d453257f authored by Filipa Lacerda's avatar Filipa Lacerda

Follow up after review

parent 1983356d
...@@ -123,7 +123,22 @@ You can read more about components in Vue.js site, [Component System][component- ...@@ -123,7 +123,22 @@ You can read more about components in Vue.js site, [Component System][component-
#### Components Gotchas #### Components Gotchas
1. Using SVGs icons in components: To use an SVG icon in a template use the `icon.vue` 1. Using SVGs icons in components: To use an SVG icon in a template use the `icon.vue`
1. Using SVGs illustrations in components: To use an SVG illustrations in a template provide the path as a prop. 1. Using SVGs illustrations in components: To use an SVG illustrations in a template provide the path as a prop and display it through a standard img tag.
```javascript
<script>
export default {
props: {
svgIllustrationPath: {
type: String,
required: true,
},
},
};
<script>
<template>
<img :src="svgIllustrationPath" />
</template>
```
### A folder for the Store ### A folder for the Store
......
...@@ -22,6 +22,7 @@ When using Vuex at GitLab, separate this concerns into different files to improv ...@@ -22,6 +22,7 @@ When using Vuex at GitLab, separate this concerns into different files to improv
└── mutation_types.js # mutation types └── mutation_types.js # mutation types
``` ```
The following example shows an application that lists and adds users to the state. The following example shows an application that lists and adds users to the state.
(For a more complex example implementation take a look at the security applications store in [here](https://gitlab.com/gitlab-org/gitlab-ee/tree/master/ee/app/assets/javascripts/vue_shared/security_reports/store))
### `index.js` ### `index.js`
This is the entry point for our store. You can use the following as a guide: This is the entry point for our store. You can use the following as a guide:
...@@ -189,6 +190,7 @@ Remember that actions only describe that something happened, they don't describe ...@@ -189,6 +190,7 @@ Remember that actions only describe that something happened, they don't describe
#### `getters.js` #### `getters.js`
Sometimes we may need to get derived state based on store state, like filtering for a specific prop. Sometimes we may need to get derived state based on store state, like filtering for a specific prop.
Using a getter will also cache the result based on dependencies due to [how computed props work](https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods)
This can be done through the `getters`: This can be done through the `getters`:
```javascript ```javascript
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment