DEV Community

Cover image for How to add typescript types to a pinia options store 🍍
hichem ben chaabene
hichem ben chaabene

Posted on

How to add typescript types to a pinia options store 🍍

import { _GettersTree, defineStore } from 'pinia';

interface Todo {
  todo: string;
}

interface State {
  count: number;
  todos: Todo[];
}

interface Actions {
  addTodo: (todo: Todo) => void;
  increment: () => void;
  resetState: () => void;
}

interface Getters extends _GettersTree<State> {
  getCount: () => number;
  getTodos: () => Todo[];
}

export const useMyStore = defineStore<string, State, Getters, Actions>({
  id: 'todo',
  state: () => ({
    count: 0,
    todos: [],
  }),
  getters: {
    getCount() {
      return this.count;
    },
    getTodos() {
      return this.todos;
    },
  },
  actions: {
    increment() {
      this.count++;
    },
    addTodo(todo) {
      this.todos.push(todo);
    },
    resetState() {
      this.count = 0;
      this.todos = [];
    },
  },
});
Enter fullscreen mode Exit fullscreen mode

Top comments (0)