正文

所謂表單元件就是跟使用者有互動的、能取到值的、是 form 的表單項的元件。在 Vue、React 中，store 裡面的資料是嚴格控制其變動方式的，store 中的 state 只能通過 commit 觸發改變。而 Svelte 中的 store 的更新是“自帶”的，通過 set、update 就可以實現，並且還能實現 store 與 表單控制元件的雙向繫結。如下：

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

export const name = createName('World!')

function createName(defaultVal) {
  const { set, subscribe, update } = writable(defaultVal)
  return {
    set, // 繫結表單項時，set 是必要的
    subscribe,
    push(value) {
      update(val => val + value)
    },
  }
}
 

<!-- App.svelte -->
<script>
  import { name } from "./store.js";
</script>

<input type="text" bind:value={$name} />
<button on:click={() => name.push('!')}> 增加感嘆號 </button>

這種靈活的寫法是否會帶來各種問題，我不知道，但儘量使用自定義 store，讓其變更或修改變得稍微可控一點，不然感覺真有點 hold 不住。。。

參考

https://www.sveltejs.cn/tutorial/store-bindings