Fullstack JS enthusiastic developer. Open Source and TypeScript lover. Software Craftmanship practitioner. Interested in the human side of code
showing 30 lessons...
In some cases we may want to pass some options to a Vuex plugin, in order to make it more customizable. This lessons shows how can you make a Vuex plugin accept a persist parameter in order to save the state to the localStorage in TypeScript
Sometimes we need to apply common functionality to the store. Vuex plugins allow us to access the store which allows direct access to
Mutation using hooks.
This lesson shows you how you can add a history Vuex plugin that keeps track of the called mutations using TypeScript.
Everything in a Vuex Module is local to itself: the
Getters. But sometimes you need to call something from the outside. This lesson shows how you can call an external
Action from within a module in TypeScript.
Even by using modules, they still share the same namespace. So you couldn’t have the same mutation name in different modules. Namespaces solve that by prepending the path of the module to the
This lesson shows how to use namespaces in Vuex modules with TypeScript.
If you need to access another part of the state from within a module, you could do it by accessing the root state. This lesson shows you how to access the Vuex root state in getters and actions to perform cross-module operations in TypeScript.
Sometimes we need to create modules at runtime, for example depending on a condition. We could even want to lazy load that module by using Webpack’s code splitting feature.
This lesson shows how to lazy load a Vuex module under a determined condition using TypeScript.
When the Vuex store grows, it can have many mutations, actions and getters, belonging to different contexts. Vuex allows you to split your store into different contexts by using modules.
In this lesson we’ll see how can we split the store in multiple Vuex modules using TypeScript
v-model uses 2 way binding to make local state easy to update and connect variables to an input or component, in an implicit way. At the same time, that makes it difficult to combine it with Vuex, since getters and mutations/actions must be called explicitly.
This lesson shows you how you can apply the
v-model functionality to a Vuex store by doing it in explicitly in 2 steps on a class-based component using TypeScript.
Mutations perform synchronous modifications to the state, but when it comes to make an asynchronous operation, they become useless.
Actions are a higher layer on the Vuex pattern, which allow to call mutations asynchronously or even call multiple mutations. This lesson guides you through using Vuex actions and type-safe them with TypeScript.
Mutations are the only way to modify application state. They make updating state in an atomic and synchronous way easy to reason about.
This lesson will show you how to modify state by using Vuex Mutations. We will add type-safety with TypeScript using the
@Mutation decorator (imported from
Accessing state directly can be ok for some cases, but in others we need another representation of state.
This lesson will show you how Vuex getters solve that issue and how to type-safe these getters with TypeScript using the
A Vuex store centralizes the state of your app, making it easy to reason about your state flow.
In this lesson we’ll see how we can create a Vuex store using TypeScript and use it on you class-based component by using the
@State decorator from Vuex Class
In Understand Redux Higher Order Reducers, I've explained to you how higher order reducers can reduce the amount of reducer logic by reusing it. You can even use multiple higher order reducers, but how?
In this lesson I show you different techniques to compose higher order reducers.
Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a new reducer. In that new reducer, you can customize the behaviour of the original one which helps reducing the reducer logic.
In this lesson, we'll see how to reduce duplicated code by refactoring two different reducers into a higher order reducer.
We’ve used @Watch, @Inject and more decorators from vue-property-decorator. In this lesson however we will guide you through creating your own decorators in order to add common functionality to your Vue components using TypeScript.
Aspect Oriented Programming, AOP, allows to reuse logic across an entire app in a very neat way, decoupling it from the business logic. Kaop-ts bring us decorators in order to apply AOP. This lesson will show you how you can move cache and exception handling out of your business logic using TypeScript and Kaop-ts
Directives allow us to apply DOM manipulations as side effects. We’ll show you how you can create your own Vue directive to change a component’s colors and type-safe it with TypeScript.
We’ll additionally show how you can pass objects to your directives and make them more flexible!
Using Object Oriented Programming, OOP, style allows us to apply Inversion of Control, IoC, and more patterns. An IoC container helps decoupling dependencies by using a class constructor or properties to identify and inject its dependencies. This lesson will show you how can you create and use an IoC container to decouple an http client and users service dependencies in a Vue component with TypeScript and InversifyJS.
Vue 2.2 introduced a simple dependency injection system, allowing you to use provide and inject in your component options. This lesson shows you how to use them using the @Inject and @Provide decorators in tandem!
With properties we can follow a one-way parent→child flow communication between components. This lesson shows you how you can pass down properties to class based Vue components by using the @Prop decorator from vue-property-decorator.
We’ll also see how we can set types and even default properties on @Prop!
Writing Vue components as plain objects has very limited capabilities for TypeScript’s IntelliSense. This lesson will show you how to write components as classes to take full potential of TypeScript static typing by using vue-class-component.
Each mutation modifies one part of the state, making it easy to debug and redo-undo modifications. This lesson shows how you can do time-travel navigation and manipulation on you Vuex store by using Vue tools.
Creating a library is always a cumbersome process with lots of setup and decisions to make. TypeScript library starter makes this process very easy and automated, using latest in tech configs and libraries such as Rollup, Jest, Prettier, TSLint, TypeDoc...
This lesson will walk you through creating a simple "tell-my-time" library from scratch, formatting and linting the code, generating optimized multiplatform bundles, unit-testing the library and showing up the important bits of the configuration.
Prettier is an amazing code formatting tool that has support for TypeScript. With Prettier, you don't need care about code formatting rules. TSLint is a static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.
This lesson shows you how can use tslint-config-prettier in order to combine both seamlessly.
In large applications, dividing the application into smaller chunks is often times necessary. In this lesson, we will look at how vue loads async components into your application.