vue3 pinia 用typescript写示例
时间: 2023-05-31 15:04:21 浏览: 62
以下是一个使用Vue3和Pinia来管理状态的示例,使用TypeScript编写:
```
import { defineStore } from 'pinia';
interface Todo {
id: number;
text: string;
completed: boolean;
}
export const useTodoStore = defineStore({
id: 'todo',
state: () => ({
todos: [] as Todo[],
nextId: 1,
}),
getters: {
completedTodos: (state) => state.todos.filter((todo) => todo.completed),
pendingTodos: (state) => state.todos.filter((todo) => !todo.completed),
},
actions: {
addTodo: (text: string) => {
const newTodo = {
id: state.nextId++,
text,
completed: false,
};
state.todos.push(newTodo);
},
toggleTodo: (id: number) => {
const todo = state.todos.find((todo) => todo.id === id);
if (todo) {
todo.completed = !todo.completed;
}
},
removeTodo: (id: number) => {
state.todos = state.todos.filter((todo) => todo.id !== id);
},
},
});
```
在上面的示例中,我们定义了一个名为`useTodoStore`的store,它管理着一个todo列表。该store有一个名为`addTodo`的action,它接收一个字符串参数并将其转换为一个todo对象,然后将其添加到列表中。此外,该store还有一个名为`toggleTodo`的action,它接收一个ID参数并将其用于查找todo对象,然后切换其completed属性的值。最后,该store还有一个名为`removeTodo`的action,它接收一个ID参数并将其用于从列表中删除todo对象。