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;
}

AddPoint 从 HTML 按钮调用。我在控制台中收到此错误- 未捕获的 ReferenceError：未定义 mapy

我只在按钮初始化后才按下它，我知道它已经初始化了，因为我在 onMount

里面的 console.log()

Answer 1

这是一个简单的范围错误。当您在 onMount (const mapy = ...) 内声明 mapy 时，您使 mapy local 成为范围内的 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;
}

onMount 错误中的 Svelte 引用全局变量

Svelte reference global variable inside onMount error

javascript

mapbox

mapbox-gl-js

svelte