Creating a Vuex Plugin

March 27, 2019 Shawn Wildermuth No Comments.
Vue Vuex Web Development JavaScript

If you're building larger scale Vue objects and you're not using Vuex to centralize your state, please stop and go learn Vuex. Really. For those of you still here, sometimes it's helpful to be able to monitor state changes to perform other tasks. For example, to send messages or communicate with servers that aren't about state (e.g. SignalR is a good example). That's where Vuex plugins come in. A Vuex plugin is a simple function that is called once during the setup of a Vuex store. Typically you'd just create the function/arrow function taking an instance of the store:

export default store => {
};

Inside the function, you just want to subscribe to changes to the store as you need. An easy way to think about this is to use subscribe to a mutation: