Блог

Я родом из vue и привык к составным функциям. Я пытаюсь понять, как это сделать в стройной

Поэтому я создал файл 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();

 

затем в .стройный компонент импортируйте функцию в скрипт и разложите на подразделы

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

Ну, в конце концов, я хочу превратиться в компонент салфетки, отсюда и название, но пытаюсь разобраться в основах. Поэтому я хочу иметь возможность иметь уникальное хранилище для каждого компонента, и для этого, если я использую несколько компонентов this .svelte, состояние будет общим для всех.

И не просто как три компонента idk modal.svelte, я хочу использовать свайп для множества различных компонентов, возможно, для просмотра фотографий.svelte просто универсальная функция свайпа и использовать один и тот же код для всех.

или мне просто нужно будет сохранить состояние, например const dyFromStart = writable(0) , только let dyFromStart = 0 в каждом компоненте .svelte, и передать его в чистую функцию 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
  };
 

Я полагаю, что это прекрасно работает, просто не реагирует на$, и если вы это делаете, вам нужно позвонить, чтобы обновить локальный var diff

мне это показалось бы наиболее стройным или чем-то в этом роде, что касается составного типа функции, а не типа хранилища

 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, 
  };
}
 

Я не до конца понимаю вопрос, поэтому сначала пытаюсь повторить то, что, по-моему, вы хотите:

• Вы хотите использовать функцию свайпа в нескольких местах
• Каждое использование этой функции салфетки должно быть независимым от всех остальных

Если это правильно, то ответ прост: не делай 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>