Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

In [Use TypeScript to Develop Vue.js Web Applications](https://egghead.io/courses/use-typescript-to-develop-vue-js-web-applications) we’ve seen how TypeScript Vue apps development by creating class based components and using decorators.

This course will extend it, showing you how you can use Vuex with TypeScript in order to manage the state of your Vue app. We’ll see how to type-safe your store, organize the state in modules, modify it using mutations and actions and write Vuex plugins, all by creating a beer shop app throughout the course.


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](https://github.com/ktsn/vuex-class/)

Create a Vuex Store using TypeScript

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 `@Getter` decorator.

Access State by using Vuex getter functions 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 `vuex-class`).

Modify State by using Vuex Mutations with TypeScript

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](https://github.com/vuejs/vue-devtools).

Use Vue Tools to Navigate Across the Vuex State

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.

Perform Async Updates using Vuex Actions with 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**.

Handle Forms Connected to a Vuex Store 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

Split Vuex Store into Modules using 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](https://webpack.js.org/guides/code-splitting/). 

This lesson shows how to lazy load a Vuex module under a determined condition using TypeScript.

Lazy Load a Vuex Module at Runtime using 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.

Access the Root State from a Vuex Module using 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 `State`, `Getter`, `Action`, and `Mutation`. 

This lesson shows how to use namespaces in Vuex modules with TypeScript.

Use Namespaces in Vuex Stores using TypeScript

Everything in a **Vuex Module** is local to itself: the `State`, `Mutations`, `Actions`, `Getters`. But sometimes you need to call something from the outside. This lesson shows how you can call an external `Mutation` and `Action` from within a module in TypeScript.

Call a Root Vuex Mutation or Action from within a Module 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 `State` and `Mutation` using hooks. 

This lesson shows you how you can add a history Vuex plugin that keeps track of the called mutations using TypeScript.

Write a Vuex Plugin using TypeScript

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

Vue.js State Management with Vuex and TypeScript

Alex Jover Morales

Course Content