如何在Svelte中封装和复用交互逻辑例如使用自定义Hooks或Actions

在Svelte中封装和复用交互逻辑可以通过使用自定义Hooks或Actions来实现。下面是一个简单的示例，展示了如何在Svelte中创建和使用自定义Hook来封装和复用交互逻辑：

// customHooks.js

import { writable } from 'svelte/store';

export function useCounter(initialValue = 0) {
  const count = writable(initialValue);

  function increment() {
    count.update(n => n + 1);
  }

  function decrement() {
    count.update(n => n - 1);
  }

  return {
    count,
    increment,
    decrement
  };
}

在上面的代码中，我们定义了一个名为useCounter的自定义Hook，它返回了一个包含count、increment和decrement三个函数的对象。我们可以在组件中使用这个Hook来实现计数器的功能，例如：

<!-- Counter.svelte -->

<script>
  import { useCounter } from './customHooks.js';

  const { count, increment, decrement } = useCounter();
</script>

<button on:click={increment}>Increment</button>
<p>{count}</p>
<button on:click={decrement}>Decrement</button>

通过将交互逻辑封装在自定义Hook中，我们可以在Svelte应用中轻松地复用这些功能，并且可以更好地组织代码结构。另外，你也可以使用Actions来实现类似的效果，只需稍作调整即可。