是否可以从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())(