面试题：Svelte的writable store在复杂场景下的应用

Question

假设你正在开发一个多页面的Svelte应用，其中多个组件需要共享并更新一个writable store。但在某些页面中，这个store的更新逻辑较为复杂，比如需要根据用户的不同操作执行不同的异步更新流程。请描述你会如何设计这个writable store及其更新机制，以确保数据的一致性和性能，并写出关键代码示例。

Answer 1

1. 设计思路：
   • 使用Svelte的writable创建共享状态。
   • 封装更新逻辑到函数中，根据不同的用户操作调用不同的更新函数，这样可以集中管理更新逻辑，保证数据一致性。
   • 对于异步更新，利用async和await处理，避免异步操作带来的数据不一致问题。
2. 关键代码示例：
   • 首先创建共享的writable store：

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

// 创建共享的writable store
export const sharedStore = writable({}); 

// 定义更新函数
export const updateStoreBasedOnUserAction1 = async (store, newData) => {
    // 模拟异步操作
    await new Promise(resolve => setTimeout(resolve, 1000)); 
    store.update(data => {
        // 这里进行具体的更新逻辑，例如合并新数据
        return {...data, ...newData }; 
    });
};

export const updateStoreBasedOnUserAction2 = async (store, newData) => {
    // 模拟另一个异步操作
    await new Promise(resolve => setTimeout(resolve, 1500)); 
    store.update(data => {
        // 不同的更新逻辑
        if (Array.isArray(newData)) {
            return {...data, list: newData }; 
        }
        return data;
    });
};

• 在组件中使用：

// SomeComponent.svelte
<script>
    import { sharedStore, updateStoreBasedOnUserAction1, updateStoreBasedOnUserAction2 } from './stores.js';
    let userData1 = { key1: 'value1' };
    let userData2 = ['item1', 'item2'];

    const handleAction1 = async () => {
        await updateStoreBasedOnUserAction1(sharedStore, userData1);
    };

    const handleAction2 = async () => {
        await updateStoreBasedOnUserAction2(sharedStore, userData2);
    };
</script>

<button on:click={handleAction1}>触发操作1</button>
<button on:click={handleAction2}>触发操作2</button>