How to build to do app using vue composition api and vuex 4 with typescript

How to Build To-
do App using
Vue
Composition API
and Vuex 4 with
Typescript
www.bacancytechnology.com

Quick Summary:
Vue Composition API- Organized, Readable,
and Understandable

In this tutorial, we will learn and explore
Vue Composition API. You might have
heard about it, but if not then don’t worry
at all! We will start from the basics. For
knowing Vue Composition API in a better
way you must have knowledge about
Options API, we will discuss that too!
I would suggest you visit my previous blog
of the Vue 3 Tutorial series- How to Build
To-do App with Vue 3 Typescript for setting
up the basic demo project because in this
tutorial we will be using the same github
repository.

Ineffective patterns for reusing logic and
component
Poor readability when component grows
larger
Code gets complex and difficult to
manage when the project size increases
Creates confusion and makes it difficult
to use Typescript with ‘this
Vue Composition API is function-based APIs
that provides flexibility, improves code
readability, and helps to maintain
component logic. The main reason for
introducing Vue Composition API was to
address the limitations of Options API as the
component gets larger.
Here are some of the limitations associated
with Options API-

Vue
Composition
API vs
Options API

You might have seen this image if you are
learning Vue Composition API. Let’s see
briefly what does it mean.
The difference in the component because of
Vue Composition API
You will notice a setup() function is the
major change. It comprises the component’s
logic. In Options API we used to define data,
methods, lifecycle, etc separately as a
component option, but due to composition
API, setup() function will consist of all these.
You might not understand the impact of
this update until your component size
grows larger. If you worked with a large
project having complex component code or
have to understand other developers’ code,
you might understand the significance of
code understandability and readability

Vue Composition API sorts the component
code and makes the logic reusable in a much
better way
Let’s take a sample code from the Github
repository: Vue 3 Typescript, which we have
built in the previous blog- How to Build a
To-do App with Typescript: Vue 3 Tutorial.

The One with
Composition API
export default defineComponent({
name: "Home",
setup() {
const tasks = ref([]); // ref is used to make
the parameter reactive
const store = useStore(); //alternative to
Vue prototype of this.$store
tasks.value = store.state.tasks;
//this is the way to write methods
const setTaskComplete = (task: Task): void
=> {
store.commit(MutationType.CompleteTask,
task);
};
const deleteTask = (task: Task) => {
store.commit(MutationType.DeleteTask,
task);
};

// To support two-way data binding
return {
tasks,
setTaskComplete,
deleteTask
};
}
});
</script>
On the contrary, you can see that the
setup() function has combined all the six
components together, which increases the
readability and understandability of the
code.

Steps: How to
Build To-do
App using Vue
Composition
API and Vuex
4 with
Typescript.

Visit Vue 3 Tutorial with Typescript
blog to create the vue-typescript project
from scratch or click here to clone the
vue-typescript-demo.
For implementing Vue Composition API
with Typescript follow the below steps.
1. Integrating Vuex 4
In the previous, files were written in
Javascript with partial Typescript, but here
we will update all the files with pure
Typescript.
For integrating Vuex 4 with Typescript, we
will need to update two files:
store/index.js and store/mutations.js.

store/index.js
Open store/index.js and update the file
with the following code.
import Task from "@/models/Task";
import { createStore, Store as VuexStore,
CommitOptions } from "vuex";
import { Mutations, mutations } from
"./mutations";
export const store = createStore({
state: {
tasks: [
{
name: "Demo for VueJS and TS",
createdAt: new Date(),
updatedAt: new Date(),
completed: false,
},

},
] as Task[],
},
mutations,
actions: {},
modules: {},
});
//to make the store globally accessible
export function useStore() {
return store as Store;
}
export type Store = Omit<VuexStore<any>,
"commit"> & {
commit<K extends keyof Mutations, P
extends Parameters<Mutations[K]>[1]>(
key: K,
payload: P,
options?: CommitOptions
): ReturnType<Mutations[K]>;
};

Use the createStore() method to create
Vuex store.
For using the store in different
components export the useStore
function. Thus, the complete store is
accessible across our entire application.
For accessing the store in the
component, we need to inject it into the
app. Thankfully, the Vue-CLI had
already imported the entire store and
passed it within the Vue instance of our
application.
Explanation
Moving towards mutations.

store/mutation.ts
Mutations are methods used for
modifying the store state.
Mutations accept the state as its first
argument and payload as the second and
then updates the state with the received
payload.
As per the recommendation by Vuex
official doc, we will use constants for the
mutation types.
Open store/mutation.ts file and update it
with the following code below.

import { MutationTree } from "vuex";
import { findIndex } from "lodash";
export enum MutationType {
SetTask = "SET_TASKS",
CompleteTask = "COMPLETE_TASK",
DeleteTask = "REMOVE_TASK"
}
export type Mutations = {
[MutationType.SetTask](state: any, task:
any): void;
[MutationType.CompleteTask](state: any,
task: any): void;
[MutationType.DeleteTask](state: any, task:
any): void;
};

export const mutations:
MutationTree<any> & Mutations = {
[MutationType.SetTask](state, task) {
state.tasks.push(task);
},
[MutationType.DeleteTask](state, task) {
let taskIndex = findIndex(state.tasks,
task);
state.tasks.splice(taskIndex, ++taskIndex);
},
[MutationType.CompleteTask](state: any,
task: any) {
const taskIndex = findIndex(state.tasks,
task);
state.tasks[taskIndex].completed = true;
}
};

Vuex package provides a generic type-
MutationTree. It is used for declaring
the type of mutation tree.
MutationTypes enum stores all the
possible names of mutations.
Further, declaring a contract (types)
for every MutationType. Create a
variable named mutations for storing
all the implemented mutations. The
MutationTree < State > & Mutations
ensures that the type is implemented
correctly for avoiding Typescript
errors.
Explanation

2. Components using
Composition API
Implementing component API in the files –
AddTask.vue and Home.vue. For that, you
need to modify the code within < script > <
script / >
AddTask.vue
<script lang="ts">
import { defineComponent, ref } from "vue";
import { useStore } from "@/store";
import { MutationType } from
"@/store/mutations";
import { useRouter } from "vue-router";

name: "AddTask",
setup() {
const taskName = ref("");
const router = useRouter(); // Substitute of
Vue prototype this.$router
const store = useStore();
const addTask = (): void => {
const newTask = new
Task(taskName.value);
store.commit(MutationType.SetTask,
newTask);
taskName.value = "";
router.push({ path: "/" });
};
return { taskName, addTask };
}
});
</script>

As the name suggests, it is used for
adding new tasks to the to-do list.
Whenever the user clicks the button Add
Task, the addTask function commits the
SetTask mutation which will add the
newly added task to the existing tasks
list.
Once done, the UI is updated.
What’s happening in this component?
Home.vue
<script lang="ts">
import { defineComponent, ref } from "vue";
import { useStore } from "@/store";
import { MutationType } from
"@/store/mutations";

name: "Home",
setup() {
const tasks = ref([]);
const store = useStore();
tasks.value = store.state.tasks;
const setTaskComplete = (task: Task): void
=> {
store.commit(MutationType.CompleteTask
, task);
};
const deleteTask = (task: Task) => {
store.commit(MutationType.DeleteTask,
task);
};
</script>

return {
tasks,
setTaskComplete,
deleteTask
};
}
});
The component is responsible for
displaying and updating (marking it done
or deleting it) the to-do list.
Whenever the user clicks the tick button,
MutationType CompleteTask is triggered
with an argument task, for marking the
task as done.
Whenever the user clicks the tick button,
MutationType DeleteTask is triggered
with an argument task, for deleting the
task as done.
Once done, the UI is updated.
What’s happening in this component?

●Integrate Vuex 4 with Typescript
●Implement Vue Composition API with
Typescript
●Source code- Github Repository
We have mostly used the major feature
releases of Vuex 4 and integrated it with the
Composition API in Vue 3 to develop a small
demo app. With the practical
implementation, we have explored the
theoretical side of Composition API and seen
how it is different than Options API.

I hope you’ve learned a great deal from
the tutorial. If you have any suggestions
or questions please feel free to comment
below.
Visit the VueJS Tutorials page for more
such tutorials.
If you are looking for skilled and
experienced VueJS developers, contact
Bacancy Technology to hire VueJs
developers.

Thank You
www.bacancytechnology.com

How to build to do app using vue composition api and vuex 4 with typescript

Recommended

More Related Content

What's hot (20)

Similar to How to build to do app using vue composition api and vuex 4 with typescript (20)

More from Katy Slemon (20)

Recently uploaded (20)

How to build to do app using vue composition api and vuex 4 with typescript