getContext 和 setContext 函数只能在组件初始化期间调用。有没有某种方法可以在运行时更新上下文值,例如单击事件。想象一下,我们将主题或本地化存储在上下文值中,并希望创建一个按钮来更改它。有可能吗?我尝试使用变量设置上下文并更新该变量,但它不起作用。像这样:
//App.svelte
<script>
import {setContext} from 'svelte';
import Name from './components/Name.svelte';
let name = 'John';
setContext('name',name);
function changeName(){
/// how to update context here ?
name = 'Mike'; // Doesn't work!!!
// setContext('name',name);// Doesn't work - Errors
}
</script>
<Name></Name>
<button on:click={changeName}>Change Name</button>
Run Code Online (Sandbox Code Playgroud)
//Name.svelte
<script>
import {getContext} from 'svelte';
let name = getContext('name');
</script>
<h1> My name is: {name}</h1>
Run Code Online (Sandbox Code Playgroud) svelte ×1