Vue developers: want to up your programming output? Start with automating Vuex boilerplate code.
The Vuex Tradeoff
Vuex is a wonderful tool for managing state in Vue applications. Unfortunately, it requires a great deal of boilerplate code. What was once a single method is now three mutations and an action spread across three files. Yes, you’re investing time into your code now that will pay dividends later. It would be nice, however, to automate some of that boilerplate….
Hygen, a tool for code generation, does just that. It offers a few features on top of your typical code gen library.
A template is a Hygen file containing boilerplate code, and instructions on where to inject it. A command executes code generation.
- You commit your templates to version control, so anyone working on the same repo benefits.
- Hygen uses an intuitive file structure for declaring the code you’d like generated. It includes a header section for articulating how (and where) the code will get copied, and a body section for the code itself. Furthermore, it comes with a syntax for variable content.
- You can easily chain together templates, causing multiple injections to occur with a single command.
Integrating Vuex with Hygen
There are a number of Hygen examples on the web. The Hygen docs even walk through setup for a React / Redux application. However, resources for integrating with Vuex are tough to find. The very popular Vue Enterprise Boilerplate project uses code gen as well, but in a more surface-level way.
Vuex poses a couple of challenges. For example, the lion’s share of our Vuex actions involve three mutations: one for the start of an asynchronous action, one upon successful completion, and one upon failure. So adding an async action means:
1.) Declare an action in actions.types.js
2.) Declare three mutations in mutations.types.js
3.) Import the action and mutations into a Vuex Module
4.) Implement the async code, committing mutations at the appropriate times
Here’s what that would look like in code:
If the module doesn’t exist yet, add another two steps: creating the module, and importing it into the Vuex root (index) file.
Automating Vuex with Hygen
Now, you may complete the entire process with a few commands. This repository includes the tools you need.
Make sure to install Hygen and clone this directory:
And then you can instantly generate actions, mutations, and modules:
The README includes steps to integrate these commands into a current project as well.
A Quick Demo
Things to Keep in Mind
These Hygen templates are a bit opinionated.
Devs opt for different styles when writing actions; I use underscore, all-caps casing.
I’ve also seen programmers structure their Vuex code differently. For instance, Ducks proposes more of a modular style. Other people throw all action code in one file. In any case, adapting the code to these styles is pretty trivial.
Even excluding style though, sometimes three mutations are not needed for an action. For instance, you may sometimes use a “finish” mutation instead of the “error” and “success” combo. Occasionally, you’ll commit a mutation from a Vue template rather than from an action. In these cases, you can lean on the stand-alone action / mutation generators. That means a bit more manual work, though.
Finally, the action injection command offers room for improvement. As noted, it relies on code comments as entry points. Using an auto formatter can sometimes strip these comments away.
In any event, we’ve discovered that automating Vuex boilerplate saves hours of time, and makes Vue development more enjoyable.