Vue, Vuetify, and Vuex – a tale of three sisters

For this third week of my internship I had the opportunity to get my hands dirty with coding by writing up my first program for one of the UIs and then testing it out by connecting to a remote PouchDB Database for Data fetching and Data creation. The PouchDB Database can then be synchronized to allow bilateral communication to ensure the client and server both contain the latest states of data.

However, the limelight for this last week rests on the Vue framework and Vuetify library. Writing functional code and then making it look fancy and elegant with Vuetify is an absolute joy because there are so many options available and each one has further several properties that can be tempered to add a more personalized touch to the overall design.

While Vuetify was a joy, the main issue I faced this week was with the scoping restrictions in Vue and JS. For instance, with the recent ES6 specification for Javascript arrow functions have become ever more important. Writing a function by declaring it in the following way creates a windowed scope.

function name(parameter1, parameter2, parameter3) {
  // code to be executed
}

Writing this same block as an arrow function solves the scoping issue as it adopts its parents scope and allows the same variables to be used by using “this”.

(paramater1, parameter2, parameter3) => {
   this.variable              //variable taken from the parent scope
}

This solved the basic JS scoping issues and allowed me to concentrate on the larger Vue part. In Vue, variables are conventionally declared as component or instance properties. So, if you want to pass the data from one instance to another you need to use props to send data up one level and then down another in order to use it elsewhere. This can get cumbersome as the project scales up and you have several variables being used across several instances.

Here enters Vuex, the de facto state management system employed by Vue for data handling. As per Dr Shawn’s suggestion, I will be using Vuex to create an abstraction layer where all the data operations can be performed. This way, the UI and the Data parts can be nicely segregated to allow a more managed and structured program format.

Having made progress on the UI and Database this last week I shall be employing Vuex more heavily this next week while focusing on the UI designs for the remaining parts of the project so that I may finish the design on time to pave the way for error handling and bug fixes through pilot tests.