Vuex in Vue.js with TypeScript

Vuex is a state management library for Vue.js, which is used for managing the state of your application. With Vuex, you can manage your application's state in a centralized store, which makes it easy to share data between components. TypeScript is a superset of JavaScript that adds static type-checking to the language, making it easier to write scalable and maintainable code. In this tutorial, we will explore how to use Vuex in Vue.js with TypeScript.

Prerequisites

Before we dive into the tutorial, make sure you have the following installed:

• Node.js (version 14 or higher)
• Vue.js (version 2 or higher)
• Vuex (version 3 or higher)
• TypeScript (version 4 or higher)

Setting Up a Vue.js Project

To get started with Vue.js, you can use the Vue CLI to generate a new project. Open your terminal and enter the following command:

vue create my-app

This will generate a new Vue.js project in a directory named my-app. Once the project is generated, navigate into the project directory by entering the following command:

cd my-app

Installing Vuex and TypeScript

To install Vuex and TypeScript in your project, enter the following command:

npm install vuex --save
npm install typescript --save-dev

This will install Vuex as a dependency and TypeScript as a development dependency.

Configuring TypeScript

Next, we need to configure TypeScript to work with our Vue.js project. Create a new file in the root of your project directory named tsconfig.json. Add the following configuration to the file:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "noImplicitAny": true,
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["webpack-env", "mocha", "chai"]
  },
  "exclude": ["node_modules"]
}

This configuration sets the target to esnext, enables strict mode, and allows for the use of decorators. It also configures the module resolution to use Node.js and sets up some path aliases.

Creating a Vuex Store

Now, let's create a Vuex store in our project. Create a new file in the src directory named store.ts. In this file, we will define our Vuex store.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

interface State {
  count: number;
}

const state: State = {
  count: 0,
};

export default new Vuex.Store({
  state,
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
  },
});

In this code, we define an interface for our state, create a new Vuex store, and define a count property in our state. We also define a mutation called increment, which will be used to increment the count property, and an action called increment, which will commit the increment mutation.

Using the Vuex Store in a Vue.js Component

Now that we have created our Vuex store, we can use it in a Vue.js component. Create a new file in the src/components directory named Counter.vue.js In this file, we will create a simple counter component that will display the current count and a button to increment the count.

<template>
  <div>
    <h2>Count: {{ count }}</h2>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    },
  },
})
export default class Counter extends Vue {}
</script>

In this code, we import the Component and Vue decorators from the vue-property-decorator package. We also define a computed property called count, which will return the count property from our Vuex store's state. We also define a method called increment, which will dispatch the increment action to our Vuex store.

To use this component in our app, we need to register it in the App.vue file. Add the following code to the App.vue file:

<template>
  <div>
    <counter />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Counter from '@/components/Counter.vue';

@Component({
  components: {
    Counter,
  },
})
export default class App extends Vue {}
</script>

In this code, we import the Counter component and register it as a child component of the App component.

Running the App

To run the app, enter the following command in your terminal:

npm run serve

This will start a local development server at http://localhost:8080. Open your browser and navigate to this URL to see the app in action.

Conclusion

In this tutorial, we learned how to use Vuex in Vue.js with TypeScript. We created a Vuex store, defined mutations and actions, and used the store in a Vue.js component. We also configured TypeScript to work with our Vue.js project. By using Vuex with TypeScript, we can write scalable and maintainable code for our Vue.js apps.