How do I integrate Vuex with TypeScript in a Vue CLI project?

How do I integrate Vuex with TypeScript in a Vue CLI project?

To integrate Vuex with TypeScript in a Vue CLI project, first, ensure you have Vuex installed. You can do this by running npm install vuex. Then, create a store directory and a store file, typically named index.ts. In this file, you can define your state, mutations, actions, and getters using TypeScript.

Can you show me an example of the store file?

Sure! Here's a simple example:

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

Vue.use(Vuex);

export interface State {
  count: number;
}

const store = new Vuex.Store<State>({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
  },
  getters: {
    count: (state) => state.count,
  },
});

export default store;

How do I use this store in my Vue components?

You can use the store in your Vue components by importing it and using the mapState and mapActions helpers from Vuex. Here's an example:

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

<script lang="ts">
import { Component } from 'vue';
import { mapState, mapActions } from 'vuex';
import { State } from './store';

@Component
export default class MyComponent extends Vue {
  get count(): number {
    return this.$store.state.count;
  }
  ...mapActions(['increment']);
}
</script>