It provides a wrapper for Svelte store.
npm install svelte-store-class
This is a simple example of a store class for a todo app
// todo.store.ts
import { writable } from 'svelte/store';
import { SvelteStore } from 'svelte-store-class';
export class TodoModel extends SvelteStore<TodoModel> {
protected store = writable(this as TodoModel);
constructor() {
super();
}
}- As shown above, we prepare a class to store the state of a typical
Todo app. - This is the minimum implementation required to function as a Svelte Store.
We add implementations necessary to manage TODO items.
// todo.store.ts
import { writable } from 'svelte/store';
export class TodoItem {
constructor(readonly label: string) {}
}
export class TodoModel extends SvelteStore<TodoModel> {
protected store = writable(this as TodoModel);
constructor(readonly items: TodoItem[] = []) {
super();
}
}In a Svelte component, use it as follows:
<script>
import { TodoModel } from './todo.store.js';
const todo = new TodoModel();
</script>
<ul>
{#each $todo.items as item}
<li>{item.label}</li>
{/each}
</ul>- The variable
todois an instance of the class and also acts as a svelte store.
Implement the functionality to add a Todo item.
// todo.store.ts
...
export class TodoModel extends SvelteStore<TodoModel> {
protected store = writable(this as TodoModel);
constructor(readonly items: TodoItem[] = []) {
super();
}
addItem(itemLabel: string) {
this.items.push(new TodoItem(itemLabel));
this.update(); // (+)
}
}this.update()- Internally callsstore.update(...).
Implement the functionality to add a Todo item in the UI.
<script>
import { TodoModel } from './todo.store.js';
const todo = new TodoModel();
function addItem() {
const label = 'This is a todo item';
todo.addItem(label);
}
</script>
<button on:click="{addItem}">New Item</button>
<ul>
{#each $todo.items as item}
<li>{item.label}</li>
{/each}
</ul>By inheriting from SvelteStore, the custom store instance hides the store object and increases programming flexibility.
Tranlated by chatgpt
