onMount 錯誤中的 Svelte 引用全局變量

Question

所以基本上我像這樣在 onMount 中初始化一個對象-

onMount(() => {
    
    const mapy = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/satellite-v9",
      center: testCoords[0],
      zoom: 19,
    
    });
    console.log(mapy);
});

然后在外面我有——

function AddPoint(){
    Center=mapy.getCenter;
}

從 HTML 按鈕調用 AddPoint。 我在控制台中收到此錯誤 - Uncaught ReferenceError: mapy is not defined

我只在它被初始化后才按下按鈕，我知道它已經被初始化，因為我在 onMount 中的 console.log()

Answer 1

這是一個簡單的范圍錯誤。 當您在onMount ( const mapy = ... ) 中聲明mapy時，您將mapy為onMount范圍內的本地，這意味着它在onMount之外未定義。

您在這里要做的是在腳本的頂層聲明mapy ，然后在onMount中分配給它：

let mapy;

onMount(() => {
    mapy = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/satellite-v9",
      center: testCoords[0],
      zoom: 19,    
    });
    console.log(mapy);
});

function AddPoint() {
    Center = mapy ? mapy.getCenter : undefined;
}