My Experience with Vuex
I’ve been using Vue.js in a small way for about three years now. It started with a client’s need for interfacing with an in-house application suite on their website. Since the user would be customizing data and the client didn’t want multiple pages, ajax requests were the obvious choice. While looking into Vue.js it seemed easier than React and a better choice than just using jQuery since I could reuse components.
That first project has turned into two additional projects. A complex library of materials using Vue, Vuex, WordPress, and Directus as well as an e-commerce site using WordPress and WooCommerce that needed a custom category page that is similar to the functionality in the materials library. On each of these projects, there are varying amounts of Vuex used.
The original project started with zero Vuex, I just didn’t need it as I was new to Vue and was passing everything as Props. This worked for a long while, but when I came back to the project after working on the library of materials I found portions that would benefit from Vuex. Most of the Props were removed and replaced to fix bad coding decisions that I reached from being new to Vue and finding less than stellar reference blog posts.
On the library of materials, I made extensive use of Vuex, but looking back at it I am able to see where I could have done things better. I could have split Vuex into modules, planned out the store better as far as naming state properties, and I could have split the hypothetical store modules into individual files (mutations, state, actions, etc.). On this category page project, I have learned so much more about Vuex.
I started with modules and individual files but then discovered I didn’t need the modules because it wasn’t as complex as I thought. I’m loving individual files though as it allows me to focus on one thing at a time. I can define my actions in
actions.ts split the pane to the left and write my mutations in
mutations.ts right next to it. I fold the action and corresponding mutation as I complete them. The biggest issue I had with individual files was figuring out
RootState because I was getting some odd errors that didn’t match up with what I was reading.
I’ve also had the opportunity to use
subscribe in this project and declare it as a plugin. It’s made it extremely easy to query the API for results once a
filter mutation has completed. I’m sure it’s not perfect but it’s my first time using it and I’m learning by doing.
The one thing I’m having a problem with is not Vuex or Vue, but TypeScript. It’s not the end of the world if I never get this figured out, but it’s one of those things that bugs me because I know it should work and would make my projects cleaner. I see all these references using examples where their imports are clean like the below examples.
I had this setup in my
tsconfig but it didn’t want to work consistently. It worked initially and VS Code showed they were acceptable imports but the actual compilation threw errors in a few files. I ended up ditching the convenience for something that actually works. That leaves me with imports that look like this:
I’m sure this is something I’ll figure out in my next project, which is going to be a personal project so I can spend as much time agonizing over every little detail as I want without worrying about a deadline. The TypeScript docs and most blog posts have left me confused because it works for them, but when I set my project up the same settings fail. I’m wondering if it’s because I’m using Laravel Mix instead of
tsc for compilation. I haven’t checked because the projects have needed Laravel Mix for other assets so it made sense to put them in there.