- Typescript typings for Vue and Vuex
- The store
- The particle module
- The particle state
- The particle getters
- The particle mutations
- The particle actions
parseAndSaveVTKXML function in Typescript syntax:
Store in this code snippet, is a Vuex store that we use to save and access data that will be needed by various components of the visualizer. In this article, I will discuss my implementation of the store.
Typescript typings for Vue and Vuex
I’ve found the typings provided by av-ts to be more convenient than the “official” version for standard Vue-2, but for Vuex I use the official version. These type header files need the “experimental decorators” option to be included in the
tsconfig.json file used by Visual Studio Code.
The compiler options in my
tsconfig.json file are
I create the Store in a file called
Store.ts. Because I am comparing the performance of Three.js and vtk.js, I include two modules that correspond to states needed by these. I also include a module for storing and retrieving the particle data. My
Store.ts file is listed below:
To make sure that the store is available to all components, we add the
store: Store key-value pair to the constructor in the file that acts as the entry point for the program,
The particle module
The particle module creates the particle state and defines actions, getters, and mutations on this state. My implementation is in the file
ParticleModule.ts listed below:
The particle state
The particle state contains the particle data that we want to store. Our implementation of
The particle getters
The getter functions are needed to access the particle store data from Vue components. My implementation of
ParticleGetters.ts is shown below:
The particle mutations
To mutate the state of the store, we have to explicitly use mutation functions. These are implemented in
ParticleMutations.ts as follows:
The names of the functions are capitalized by convention.
SET_PARTICLE_DATA mutation is how we save the particle data when we call
Store.commit('SET_PARTICLE_DATA', pointData); in our function
The particle actions
Actions are similar to mutations but can perform asynchronous operations. In our case, we don’t want to use actions at this stage but implement the functionality in
Now that the particle data have been read in and stored, we can proceed with creating a three-dimensional view that we can interact with. We will explore a Three.js implementation in part 3 of this series.
Notice that we have used Typescript in our code. This choice has the advantage that we can use strong typing to catch errors during compile time. However, we a limited to using libraries that have been carefully assigned types by third-parties. This is a serious limitation and significantly reduces the attractiveness of Typescript as a development platform.
If you have questions/comments/corrections, please contact banerjee at parresianz dot com dot zen (without the dot zen).