A few weeks back, someone reached out over email with a question about how to add support for capturing mouse events that took place within the bounds of a Vue component. Off the top of my head I could think of couple ways to do it, but none of them were very sustainable or extensible.
So I did the only thing I know to do in such a situation; I whipped up some code and compared the different ways of achieving the same goals in Vue.
In my last post, we took a look at how you might implement shared state in your Vue.js app by comparing a vuex implementation with a hand-coded alternative. Incorporating vuex, as we saw, is pretty straightforward once the core concept of one-way data flow in Vue makes sense.
This time, I’d like to take the demo a little further by introducing modules, constants for mutation names, and organizing our actions a bit differently.
(Update 10/14/16: This article has been translated into simplified Chinese by @sqrtthree. Also available here.)
It seems like one of the things that trips people up in Vue is how to share state across components. For those new to reactive programming, something like vuex can seem daunting with loads of new jargon and the way it separates concerns. It can also seem like overkill when all you want is to share one or two pieces of data.
The old site was getting a little clunky, despite being only a few months in service. I had never intended for the design to last very long in the first place, and I certainly didn’t expect to get anywhere near the level of traction I got for some posts. Thank you all for reading!
This new site is running on Hugo, an amazing static site generator written in Go. If you are looking to start any sort of content-driven site, or feel like the old one is outgrowing its roots, I encourage you to give Hugo a serious look.
On Wednesday I shared some of the resources I’ve been using to move from previous releases of Vue to the new Vue 2.0 API. (BTW: I’ve got a few more links to add, thanks to some great folks on Twitter.) The biggest changes in 2.0 aren’t really in the API itself, but there are a few tricky bits here and there.
As I’ve proceeded, I’ve found it is a little easier to just start some mini projects from scratch to test out some of the new functionality, as opposed to trying to reason about how to rewrite old code.