是否可以从Svelte操作中更新组件变量？

Question

操作可以更新组件变量吗？例如，在下面的App.svelte中，是否可以更新disabled和errors的值？

<script>
  import { form } from './use-form'

  let disabled
  let errors = {}

  const submit = e => {
    const formData = new FormData(e.target)

    const data = {}
    for (let field of formData) {
      const [key, value] = field
      data[key] = value
    }
    console.log(data)
    e.target.reset()
  }
</script>

<form on:submit|preventDefault={submit} use:form={[disabled, errors]}>
  <input name="email" type="email" required />
  {#if errors && errors.email} <p>{errors.email}</p>{/if}
  <input name="password" type="text" minlength="8" required />
  {#if errors && errors.password} <p>{errors.password}</p>{/if}
  <hr />
  <button formnovalidate disabled={!disabled}>submit</button>
</form>

下面是use-form的操作：

export const form = (node, [disabled, errors]) => {
  let inputs = node.querySelectorAll('input:invalid')

  const handleBlur = event => {
    ;[...inputs].forEach(e => {
      if (e.value.length === 0) {
        return
      } else {
        errors[e.name] = e.validationMessage
      }
    })

    disabled = node.checkValidity()
  }

  const handleInput = event => {
    ;[...inputs].forEach(e => {
      if (e.value.length === 0) {
        return
      } else {
        errors[e.name] = e.validationMessage
      }
    })

    disabled = node.checkValidity()
  }

  document.addEventListener('blur', handleBlur, true)
  document.addEventListener('input', handleInput, true)

  return {
    update: (disabled, errors) => {
      return disabled, errors
    },
    destroy: () => {
      document.removeEventListener('blur', handleBlur, true)
      document.removeEventListener('input', handleInput, true)
    },
  }
}

为了更好地说明我要实现什么，我尝试用一个粗糙的工作解决方案来实现一个排斥，尽管所有这些都被夹在一个文件中。

Answer 1

这不起作用，因为Svelte不知道它们被更新了。你能做的是

• 将事件添加到操作中，并在组件的回调中执行重新分配：use:form={{onDisabled: d => disabled = d, ...}} (在动作调用onDisabled(node.checkValidity())中)
• 使用商店代替，因为Svelte会注意到它们何时被更新：let disabled = writable(false); ... (在操作中做disabled.set(node.checkValidity()))