If 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.
I have to admit, my first experiences with React several years ago were meet with a lot of cynicism. The idea of mixing JavaScript and Markup made me clutch my pearls to the core.
Now I know that you can use React without using JSX, but I think that is missing the point in a lot of ways. Of course, I'm not a React expert so I am sure you'll let me know how wrong I am ; )
As many of my readers already know, I've become enamoured with Vue.js. Because of this, I've been using it more and more on projects.
Since I also deal with ASP.NET Core almost exclusively, I've been at odds with how to get the two technologies to work well together. Originally I had just used the JavaScript file, but as I've started building larger pieces, I've wanted to use projects built by the Vue CLI in ASP.NET Core. Here's how I've been doing it. Might not be right, but it's at least a way ; )
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:
At my training site (Wilder Minds Training), I'm working on a new kind of course for me. I'm calling them Micro-Courses.
The idea behind these new courses is that they are short and teach one very discrete skill. My first one is SignalR!
I'm back writing again. I've missed it. You'll see more and more articles in different publications from me in the near future.
The first of these articles is for Code Magazine. It's a quick overview of how Vue works and how you can use it for more than just SPAs. Check it out here:
I had the opportunity to speak at the Atlanta Vue Meetup recently. This was a great group of people who had mostly had experience with Vue.js.
I'm so used to having to try and convince people to use Vue, that this was a fun talk to get people interested in using it in different ways than they are used to.
I had a great time presenting to the Atlanta .NET Users' Group last night. I talked about where I think Vue.js.
I got to espouse my opinion (again) about SPA being large monoliths instead of building 'islands of functionality'. I learned a new achronym too, "Multiple Page Apps" or MPAs for this type of client-side dev.
So it's the new year and I guess I'll join the party with my end of year wrap-up. It's been a big year for me and I'm excited about this next year.
If you've read my blog for a while, you might remember that I did this last year. My goals were a bit hit and miss. Some I did really well, and others I struggled. But I think that's the nature of it all.
The Vue team has been working hard. Much like Angular, the Vue team has a command-line interface (CLI) to help develop projects with Vue.
If all you're doing is building a SPA, the CLI can really help simplify setting up a project. But is that all you should be doing with Vue?
| Vue.js by Example (New Lower Price) |
| Bootstrap 4 by Example (New Lower Price) |
| Intro to Font Awesome 5 (Free Course) |
| 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.27617.04 |
| Operating System | Microsoft Windows 10.0.14393 | Runtime Arch | X86 |
