小编OmG*_*G3r的帖子

我的一个组件订阅了商店中的一个变量。每当该存储变量发生变化时，我想触发一个函数。

商店.js

    import { writable } from "svelte/store"; 
    export const comparedProducts = writable([1,2,3]);

组件.svelte

    import { comparedProducts } from "../stores.js";
    
    //if there is a change in $comparedProducts trigger this function eg. ([1,2])
    const someFunction = () => {
      //do something
    }

我有一个页面（动态路由），我在其中从加载函数中的 API 获取数据。在获取数据之前显示加载指示器的正确方法是什么？我尝试过的事情：

1. 使用await 块。我返回一个获取函数的承诺，然后在正常的脚本标记中，导出一个承诺变量。然后，我在操作数据后手动解决这个承诺。

<script context="module">
  export async function load({ fetch, page }) {   
    let collectionId = page.params.id;    
    let endpoint = url;   
    const promise = fetch(endpoint);  
    return {props:{promise}}; 
  }
</script>

然后在正常的脚本标签中

<script>
export let promise = new Promise(() => '');

promise = new Promise((resolve, reject) => {
    promise.then(function (response) {
      if(response.ok){
        console.log('response');
        response.json().then(function (json) {
          console.log('data in promise');
          console.log(json);
          let posts = json.map((post) => new Post(post));
          posts = posts.sort(function (a, b) {
            return a.id - b.id;
          });
          resolve(posts);
        }); …

我目前正在尝试在用户单击 href 链接时将用户重定向到新页面。问题是网址本身确实发生了变化，但只有当我手动点击“重新加载”时，页面才会真正刷新并显示新数据。

我如何构建 href 链接：

resultString += "<a href='/edition/id=" + this.note['name'][i]['hkg:persKey'] + "'>";
resultString += this.note['name'][i]['#text'];
resultString += "</a>";

然后，resultString 被推送到一个数组，并在另一个组件中正确读出。

问题是，当重定向时，url 中的 id 明显发生变化并在 url 中更新，但页面不会重新加载。

例如：在'id=xy'URL为：的页面上'/edition/id=xy'，在该页面上'/edition/id=z'显示href。单击此 href 时，网址会明显更改为，'/edition/id=z'但页面不会重新加载。

有谁知道如何解决这个问题？

在我的 App.svelte 中，我的函数包含以下代码：

<script>
    import Categories from "./Categories.svelte";

    let choice = { category: false };

    export function toggle() {
         choice.category = !choice.category;
    }
</script>

{#if choice.category}
    <Categories />
{:else}
    <p>Foo.</p>
{/if}

在我的类别组件中，我有以下代码：

<button id="vegetation" on:click="toggle()">
    <span>Analyse vegetation and forestry</span>
</button>

我想要的是：当我单击类别组件中的按钮时，toggle()应该调用该函数。

我怎样才能做到这一点？

开发模式使用npm run dev，发布模式使用npm build

我怎么知道它当前是建立在开发模式上还是不在代码中，例如：

<script>
    import {onMount} from 'svelte';

    onMount(function(){
        if(DEVMODE) { // --> what's the correct one?
            console.log('this is x.svelte');
        }
    })
</script>
 

我尝试使用运行两个 svelte 项目npm run dev，但是第二个项目给出了错误Error: listen EADDRINUSE: address already in use :::35729。

我在网上寻找了解决方案，但没有效果。

我在哪里可以修改此配置以选择另一个端口。

目前，当我在浏览器中打开开发人员工具时，我可以看到我的原始精简组件，我想隐藏此信息并仅发送丑陋的代码。

这是我打开开发者工具时得到的结果。我正在构建一个single page application.

这是我的rollup.config.js

这是我用来运行项目/汇总的脚本。在发现package.json

 "scripts": {
      "build": "rollup -c",
      "dev": "rollup -c -w",
      "start": "sirv public --host 0.0.0.0 --port 2222 --single"
} 

对于我运行的生产npm run build

我已设置sourcemap: false，在 中rollup.config.js，源文件已从/public/build文件夹中消失，但浏览器仍然显示组件