svelte/store 多模块如何组织？

在 Svelte 中，store 是一种用于管理应用状态的机制。对于大型应用程序，将 store 按模块组织有助于保持代码的清晰和可维护性。你可以将每个模块的 store 放在单独的文件中，并根据需要进行导入和使用。

示例：多模块 store 组织

假设我们有一个应用程序，有用户管理和产品管理两个模块。我们将分别为这两个模块创建 store。

目录结构

src/
├── stores/
│   ├── userStore.js
│   ├── productStore.js
│   └── index.js
├── components/
│   ├── UserComponent.svelte
│   └── ProductComponent.svelte
└── App.svelte

创建用户 store

// src/stores/userStore.js
import { writable } from 'svelte/store';

export const user = writable({
  name: '',
  email: ''
});

export function setUser(newUser) {
  user.set(newUser);
}

export function clearUser() {
  user.set({ name: '', email: '' });
}

创建产品 store

// src/stores/productStore.js
import { writable } from 'svelte/store';

export const products = writable([]);

export function addProduct(product) {
  products.update(items => [...items, product]);
}

export function removeProduct(productId) {
  products.update(items => items.filter(item => item.id !== productId));
}

导出所有 store

// src/stores/index.js
export * from './userStore';
export * from './productStore';

使用 store 在组件中

<!-- src/components/UserComponent.svelte -->
<script>
  import { user, setUser, clearUser } from '../stores';

  function updateUser() {
    setUser({ name: 'John Doe', email: 'john.doe@example.com' });
  }

  function logout() {
    clearUser();
  }
</script>

<div>
  <h2>User Information</h2>
  <p>Name: {$user.name}</p>
  <p>Email: {$user.email}</p>
  <button on:click={updateUser}>Update User</button>
  <button on:click={logout}>Logout</button>
</div>

<!-- src/components/ProductComponent.svelte -->
<script>
  import { products, addProduct, removeProduct } from '../stores';

  function addNewProduct() {
    addProduct({ id: 1, name: 'Product 1' });
  }

  function deleteProduct(productId) {
    removeProduct(productId);
  }
</script>

<div>
  <h2>Products</h2>
  <ul>
    {#each $products as product}
      <li>
        {product.name}
        <button on:click={() => deleteProduct(product.id)}>Delete</button>
      </li>
    {/each}
  </ul>
  <button on:click={addNewProduct}>Add Product</button>
</div>

主应用程序组件

<!-- src/App.svelte -->
<script>
  import UserComponent from './components/UserComponent.svelte';
  import ProductComponent from './components/ProductComponent.svelte';
</script>

<main>
  <h1>My App</h1>
  <UserComponent />
  <ProductComponent />
</main>

总结

通过将 store 按模块组织，你可以更好地管理应用状态，并使代码更具可维护性和可扩展性。每个模块的 store 放在单独的文件中，并在需要时进行导入和使用。这种方式不仅清晰明了，还能帮助你在大型应用程序中保持良好的结构和组织。