A store for an "todo" application
The store class:
import {Store} from "@idevelopthings/vue-class-stores/vue";
import axios from 'axios';
// We defined loading/todos state here
interface ITodosStore {
loading: boolean;
todos: ITodo[];
}
// The type of our todo object
export interface ITodo {
userId: number;
id: number;
title: string;
completed: boolean;
}
class TodosStore extends Store<TodosStore, ITodosStore>() {
get state(): ITodosStore {
return {
loading : false,
todos : [],
};
}
async load() {
try {
this.$loading = true;
this.$todos = (await axios.get<ITodo[]>('https://jsonplaceholder.typicode.com/todos/1')).data;
// We could also use this.state.todos = (await axios....)
} catch (error) {
console.error(error);
} finally {
this.$loading = false;
}
}
get isLoading(): boolean {
return this.$loading;
}
get todos(): ITodo[] {
return this.$todos;
}
}
export const todosStore = new TodosStore();
The vue SFC:
<template>
<div v-if="$todos.isLoading"><p>Loading your todos!</p></div>
<div v-else>
<div v-for="todo in $todos.todos">
<p>{{ todo.title }}</p>
<p>Is complete? {{ todo.completed }}</p>
</div>
</div>
</template>
<script setup lang="ts">
import {todosStore} from "./Stores/TodoStore";
todosStore.load();
</script>
The package will automatically register the vue devtools plugin for you This will allow you to inspect your state and trigger your, actions for testing purposes(although you cannot pass parameters yet :())
You can also edit your state from the plugin also :)