Stories Tagged with 'Vuex'

Vuex and Asynchronicity

Async and AwaitIf you're using Vuex for state management in your Vue.js applications, there is a good chance that you need to use async operations (e.g. API calls). I have been doing this a while, but falling back to using Promises in most cases.

As I've been using async/await in C# for a while and wanted to try out async and await in JavaScript. In implementing the change, I thought I'd share how I did this in a simple Vue app.

Creating a Vuex Plugin

VueIf 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:

Shawn Wildermuth
Author, Teacher, and Coach

My Courses

Wilder Minds Training
Vue.js by Example (New Lower Price)
Bootstrap 4 by Example (New Lower Price)
Intro to Font Awesome 5 (Free Course)
Building an API with ASP.NET Core (New Course)
Building a Web App with ASP.NET Core, MVC6, EF Core, Bootstrap and Angular (updated for 2.2)
Less: Getting Started (New)
Using Visual Studio Code for ASP.NET Core Projects
Implementing ASP.NET Web API

Application Name WilderBlog Environment Name Production
Application Ver v4.0.30319 Runtime Framework x86
App Path D:\home\site\wwwroot\ Runtime Version .NET Core 4.6.27514.02
Operating System Microsoft Windows 10.0.14393 Runtime Arch X86