svelte 可以使用可组合函数吗？

Question

我来自 vue，习惯于组合函数。我正在尝试找出在 svelte

中执行此操作的方法

所以我制作了一个 js 文件并导入商店，然后尝试制作一个可以调用多个组件并单独执行的函数

swipe.js 文件

import { writable, derived, get } from 'svelte/store';

function createSwipe() {

  const dyFromStart = writable(0)

  function moveEvent(eventType, val){
    console.log('moveEvent', eventType, val, get(dyFromStart))
    dyFromStart.update(n => n + 1);
  }

  const dxScore = derived(dyFromStart, $dyFromStart => $dyFromStart + 3)
  const dyScore = derived(dyFromStart, $dyFromStart => Math.round($dyFromStart + 100));
  return {
    moveEvent,
    dxScore,
    dyScore, 
  };
}

export const swipe = createSwipe();

然后在 .svelte 组件中导入脚本中的函数并分解成子部分

<script>
import { swipe } from "$lib/swipe";
let { moveEvent, dxScore, dyScore } = swipe
</script>
<p>{$dxScore}{$dyScore}</p>
<button on:click="() => moveEvent">button</button>

好吧，最终我想变成一个刷卡组件，因此得名，但试图降低基本原理。所以我希望能够为每个组件拥有唯一的存储，为此，如果我使用多个这个 .svelte 组件，状态将在所有组件之间共享。

而且不只是像三个 idk modal.svelte 组件我想对一堆 diff 组件使用滑动可能 photoViewer.svelte 只是通用滑动功能并且对所有组件使用相同的代码。

或者我是否只需要在每个 .svelte 组件中保持状态 const dyFromStart = writable(0) 只是 let dyFromStart = 0 并将其传递到 returns 结果并更新本地的纯 js 函数.svelte 变量

将此添加为非存储更纯的 js 东西，我正在尝试但无法做出反应，因此接受下面关于有效且听起来像的存储方法的答案是正确的方法

export function createSwipe() {
 let dyFromStart = 0

  function moveEvent(eventType, val){
    console.log('moveEvent', eventType, val, dyFromStart, dxScore(), dyScore())
    dyFromStart++
  }

  function dxScore(){ return dyFromStart + 3 }
  // const dzScore = derived(dyFromStart, $dyFromStart => $dyFromStart + 3)
  const dyScore = () => Math.round(dyFromStart + 100)
  
  return {
    moveEvent,
    dxScore,
    dyScore,
    dyFromStart
  };

export function createSwipe() {
let dyFromStart = 0
  let dxScore = dyFromStart + 3
  let dyScore = Math.round(dyFromStart + 100)

  function moveEvent(eventType, val){
    console.log('moveEvent', eventType, val, dyFromStart, dxScore, dyScore)
    dyFromStart++
    dxScore = dyFromStart + 3
    dyScore = Math.round(dyFromStart + 100)
  }

  return {
    moveEvent,
    dxScore,
    dyScore,
    dyFromStart
  };

我想这很好用，只是对 $ 没有反应，如果这样做的话需要调用更新 diff local var

就可组合函数类型样式而不是存储类型而言，这对我来说似乎是最精巧的或类似的东西

export function createSwipe() {
 let dyFromStart = 0

  function moveEvent(eventType, val){
    console.log('moveEvent', eventType, val)
    dyFromStart++
  }

  $: dxScore = dyFromStart + 3
  $: dyScore = Math.round($dyFromStart + 100)
  return {
    moveEvent,
    dxScore,
    dyScore, 
  };
}

Answer 1

我没有完全理解这个问题，所以我试着先重申一下我认为你想要的：

您想在多个地方使用滑动功能
该滑动功能的每次使用都应独立于所有其他功能

如果这是正确的，那么答案很简单：不要做 export const swipe = createSwipe()。删除该部分，而是导出创建函数以直接在您的组件中使用。这样你每次都创建一个新的独立实例：

<script>
  import { createSwipe } from "$lib/swipe";
  let { moveEvent, dxScore, dyScore } = createSwipe()
</script>
<p>{$dxScore}{$dyScore}</p>
<button on:click="() => moveEvent">button</button>

svelte 可以使用可组合函数吗？

Can svelte use composable functions?

javascript

svelte

sveltekit