Svelte에 저장

2743 단어 svelte
스토어는 단순히 스토어 값이 변경될 때마다 관심 있는 당사자에게 알림을 제공하는 subscribe 메서드가 있는 객체입니다.

<script>
  let countValue;
  const unsubscribe = count.subscribe(value => {
    count_value = value;
  });
  onDestroy(unsubscribe);
</script>

<h1>The count is {count_value}</h1>


저장된 값을 업데이트합니다.

<script>
  function increment() {
    count.update(n => n + 1)
  }
</script>


값을 설정합니다.

<script>
  function reset() {
    count.set(0);
  }
</script>


용법
자동 구독을 사용하여 subscribe 및 onDestroy 메소드를 제거하십시오.

<script>
  import { storeValue } from './AnotherComponent'
  // ...other imports come after
</script>

<h1>The count is {$storeValue}</h1>


읽을 수 있는 저장소

<script>
  export const time = readable(new Date(), function start(set) {
    // Implementation
    set()

    return function stop() {
      // Implementation
    }
  })
</script>


쓰기 가능한 저장소

<script>
  import { writable } from 'svelte/store';

  const count = writable(0, () => {
    console.log('got a subscriber');
    return () => console.log('no more subscribers');
  });
</script>


파생 저장소

…from another store.

<script>
  import { derived } from 'svelte/store';

  const delayed = derived(time, ($a, set) => {
    setTimeout(() => set($a), 1000);
  }, 'one moment...');

  // or (read-only derived):

  const elapsed = derived(time, $time =>
    Math.round(($time - start) / 1000)
  );

</script>


커스텀 스토어

// store.js

import { writable } from 'svelte/store';
function createCount() {
  const { subscribe, set, update } = writable(0);

  return {
    subscribe,
    increment: () => update(n => n + 1),
    decrement: () => update(n => n - 1),
    reset: () => set(0)
  };
}
export const count = createCount();


구성 요소에서:

<script>
  import { count } from './store.js';
</script>

<h1>The count is {$count}</h1>

<button on:click={count.increment}>+</button>
<button on:click={count.decrement}>-</button>
<button on:click={count.reset}>reset</button>

좋은 웹페이지 즐겨찾기