如何使依赖于参数的 Svelte 变量具有反应性？

Question

我正在尝试找出 Svelte 中的路由和响应能力。我有一个非常简单的 REPL 设置：https://svelte.dev/repl/e366816d12d04fb4ac982b7c37058655?version=3.47.0

我的应用程序文件指定了我的路线。我只想每次将状态名称传递到路径中。效果不错。

        <script>
            import Router from 'svelte-spa-router';
            import State from './State.svelte'
            
            const routes = {
              "/state/:stateName": State,
            }
        </script>

        <ul>
            <li><a href="/#/state/California">California</a></li>
            <li><a href="/#/state/Idaho">Idaho</a></li>
            <li><a href="/#/state/Montana">Montana</a></li>
            <li><a href="/#/state/Oregon">Oregon</a></li>
            <li><a href="/#/state/Washington">Washington</a></li>
        </ul>

        <Router {routes}/>

在State.svelte中，我导出params以便打印我传入的状态名称。但是，我还想显示一些其他数据。

按照我现在的设置方式，当我点击第一个州时，currentPop 正确显示，但是当我点击其他州时，人口数量保持不变。我怎样才能更新我的代码，以便人们响应？谢谢！

            <script>
                export let params;
                import * as d3 from "d3";

                let states = [{"ID State":"04000US06","State":"California","ID Year":2019,"Year":"2019","Population":39512223,"Slug State":"california"},{"ID State":"04000US16","State":"Idaho","ID Year":2019,"Year":"2019","Population":1787065,"Slug State":"idaho"},{"ID State":"04000US30","State":"Montana","ID Year":2019,"Year":"2019","Population":1068778,"Slug State":"montana"},{"ID State":"04000US41","State":"Oregon","ID Year":2019,"Year":"2019","Population":4217737,"Slug State":"oregon"},{"ID State":"04000US53","State":"Washington","ID Year":2019,"Year":"2019","Population":7614893,"Slug State":"washington"}]

                let currentState, currentPop;

                for(i=0;i<states.length;i++){
                    currentState = states.filter((d) => d.State == params.stateName);
                        currentPop = currentState[0].Population;
                }
                
            </script>
            <p>
                the great state of {params.stateName}
            </p>

            2019 population: {currentPop}

Answer 1

只做更新部分responsive using $:

$: for(i=0;i<states.length;i++) { //...

Svelte 将跟踪 statement/block 的依赖关系，并在任何依赖关系发生变化时再次执行它。

代码可以是simplified to this，顺便说一句：

$: currentState = states.find((d) => d.State == params.stateName);
$: currentPop = currentState.Population;

如何使依赖于参数的 Svelte 变量具有反应性？

How can you make Svelte variables that are dependent on params reactive?

routes

svelte