4 Best Practices for Large Scale Vue.js Projects

Use helpers to simplify your code

In the first part of the article, I mentioned about 4 components used in Vuex store. Let’s consider a situation where you need to access those states, getters or you need to call actions, mutations in your component. I such situations you don’t need to create multiple computed properties or methods, you can easily use the helper methods (mapState, mapGetters, mapMutations and mapActions) to reduce the code. Let’s see those 4 helpers in action:

import { mapState } from 'vuex'export default {
computed: mapState({
count: state => state.count,
countAlias: 'count',
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
import { mapGetters } from 'vuex'export default {
computed: {
...mapGetters([
'count1',
'getter1',
])
}
}
import { mapMutations } from 'vuex'export default {
methods: {
...mapMutations({
cal: 'calculate' // map `this.cal()` to `this.$store.commit('calculate')`
})
}
}
import { mapActions } from 'vuex'export default {
methods: {
...mapActions({
cal: 'calculate' // map `this.cal()` to `this.$store.dispatch('calculate')`
})
}
}

Testing is another important aspect of any project. As developers, we must test what we develop despite the importance or the size of the project. Especially when it comes to large scale projects, there are hundreds and thousands of small functions, and it is our duty to test each of these functions. Unit Tests come into action on such scenarios and it allows developers to test individual code units. Unit tests, not only avoid bugs, but it also improves the confidence of the development team about their work, whenever they do a change. When the projects grow over time, developers can add new features without any fear of breaking another by following a good unit testing mechanism from the beginning.

  • Use a good assertion library. (Eg: there are build in assertion libraries for jest framework, Chai library is used with Mocha)
  • Write unit tests to cover each Vue component.

Author: admin

Leave a Reply

Your email address will not be published.