How do I use Vuex with TypeScript in Vue 3?

How do I use Vuex with TypeScript in Vue 3?

To use Vuex with TypeScript in Vue 3, first install Vuex and its TypeScript types. Then, create a store using TypeScript interfaces for state and actions.

Can you show me a simple example of a Vuex store?

Sure! Here's a basic example:

import { createStore } from 'vuex';

interface State {
  count: number;
}

const store = createStore<State>({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

This creates a simple store with a count state and an increment mutation.

How do I use this store in a Vue component?

You can use the store in a Vue component by importing it and using the useStore function from Vuex. Here's an example:

import { defineComponent } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  setup() {
    const store = useStore();
    return { store };
  },
});

What about using actions and getters?

You can define actions and getters in your store like this:

const store = createStore<State>({
  state: { count: 0 },
  mutations: { increment(state) { state.count++; } },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
});