Quick Summary:
Vue Composition API- Organized, Readable, and Understandable
Learn, explore, and build a to-do application using Vue Composition API and Vuex 4 TypeScript. Go through the step-by-step guide till the end and clone the github repository to experiment with the code-base.
In this tutorial, we will learn 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.
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-
You might have seen this image if you are learning Vue Composition API. Let’s see briefly what does it mean.
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.
export default{ name: "Home", data() { return { tasks: [] }; }, methods: { setTaskComplete(task){ this.$store.commit("completeTask", task); }, deleteTask(task) { this.$store.commit("deleteTask", task); } }, mounted() { this.tasks = this.$store.state.tasks; } };
We have used component options – data, methods, and mounted for splitting the component’s logic. Vue provides a total of six component options to use the logic. It might sound easy to code and manage, but once your component grows, it makes it difficult to organize and makes it harder for other developers to read and understand.
Are you looking for proficient VueJs developers for your project?
Bacancy is here for you! Contact us now and hire Vue js developer to build, optimise, and deploy your application.
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 }; } });
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.
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.
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.
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, }, { name: "UI design", 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 , "commit"> & { commit [1]>( key: K, payload: P, options?: CommitOptions ): ReturnType ; };
Explanation
Moving towards mutations.
Mutations are methods used for modifying the store state.
Mutations accept the state as its first argument and payload as the second and then update 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 & 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; } };
Explanation
Implementing component API in the files – AddTask.vue and Home.vue. For that, you need to modify the code within < script > < script / >
What’s happening in this component?
What’s happening in this component?
● Vuex 4 + Typescript
● Implement Vue Composition API + 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, get in contact with Bacancy, one of the leading Vue.js development company. If you don’t believe so, connect now and experience the best vujs development services by yourself today!
Your Success Is Guaranteed !
We accelerate the release of digital product and guaranteed their success
We Use Slack, Jira & GitHub for Accurate Deployment and Effective Communication.
Try our free consultation to visualize the best outcome of your business ideas.
INSTANT 30 MIN FREE CONSULTATION CALL