diff options
| -rw-r--r-- | doc/development/fe_guide/vue.md | 32 |
1 files changed, 16 insertions, 16 deletions
diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md index f274ae93260..2607353782a 100644 --- a/doc/development/fe_guide/vue.md +++ b/doc/development/fe_guide/vue.md @@ -28,7 +28,7 @@ As always, the Frontend Architectural Experts are available to help with any Vue All new features built with Vue.js must follow a [Flux architecture][flux]. The main goal we are trying to achieve is to have only one data flow and only one data entry. -In order to achieve this goal, you can either use [vuex](vuex) or use the [store pattern][state-management], explained below: +In order to achieve this goal, you can either use [vuex](#vuex) or use the [store pattern][state-management], explained below: Each Vue bundle needs a Store - where we keep all the data -,a Service - that we use to communicate with the server - and a main Vue component. @@ -147,6 +147,7 @@ You can read more about components in Vue.js site, [Component System][component- 1. Using SVGs in components: To use an SVG in a template we need to make it a property we can access through the component. A `prop` and a property returned by the `data` functions require `vue` to set a `getter` and a `setter` for each of them. The SVG should be a computed property in order to improve performance, note that computed properties are cached based on their dependencies. + ```javascript // bad import svg from 'svg.svg'; @@ -697,25 +698,24 @@ The store should be included in the main component of your application: }; ``` -### Gotchas -1. Avoid calling a mutation directly. Always use an action to commit a mutation. Doing so will keep consistency through out the application. -From Vuex docs: +### Vuex Gotchas +1. Avoid calling a mutation directly. Always use an action to commit a mutation. Doing so will keep consistency through out the application. From Vuex docs: -> why don't we just call store.commit('action') directly? Well, remember that mutations must be synchronous? Actions aren't. We can perform asynchronous operations inside an action. + > why don't we just call store.commit('action') directly? Well, remember that mutations must be synchronous? Actions aren't. We can perform asynchronous operations inside an action. -```javascript -// component.vue + ```javascript + // component.vue -// bad - created() { - this.$store.commit('mutation'); - } + // bad + created() { + this.$store.commit('mutation'); + } -// good - created() { - this.$store.dispatch('action'); - } -``` + // good + created() { + this.$store.dispatch('action'); + } + ``` 1. When possible, use mutation types instead of hardcoding strings. It will be less error prone. 1. The State will be accessible in all components descending from the use where the store is instantiated. |