Svelte中onMount外调用对象方法报错：Cannot read properties of undefined

• 核心问题出在代码执行顺序：
  • onMount是Svelte组件挂载到DOM后才会触发的钩子，属于异步执行逻辑；而你写的同步代码（直接声明sliderInfo、立即执行函数）都是在组件挂载前就运行了，这时候slider还没被tns()初始化，还是undefined，调用getInfo()自然会报错。
  • 按钮点击是用户触发的交互事件，此时组件早已挂载完成，onMount已经执行完毕，slider已经被正确赋值，所以调用方法能成功。

方案1：在onMount内部直接处理 #

如果sliderInfo只需要初始化一次，把调用逻辑直接放到onMount里即可：

import { onMount } from "svelte";
import { tns } from "tiny-slider/src/tiny-slider.js";

let slider;
let sliderInfo;

onMount(() => {
  slider = tns({
    container: ".my-slider",
    slideBy: 1,
    speed: 1000,
    nav: false,
    controls: false,
    autoplay: true,
    autoplayButtonOutput: false,
    responsive: {
      1024: {
        items: 4,
      }
    },
  });
  // 初始化完成后立即获取信息
  sliderInfo = slider.getInfo();
});

方案2：用响应式语句监听slider状态 #

如果需要后续slider状态变化时自动更新sliderInfo，可以用Svelte的响应式声明$:：

import { onMount } from "svelte";
import { tns } from "tiny-slider/src/tiny-slider.js";

let slider;
let sliderInfo;

onMount(() => {
  slider = tns({
    // 配置同上
  });
});

// 当slider被赋值后自动执行获取逻辑
$: if (slider) {
  sliderInfo = slider.getInfo();
}

方案3：封装安全调用函数（适合多场景复用） #

如果需要在其他地方也能安全调用getInfo，可以封装一个函数，确保slider存在才执行：

import { onMount } from "svelte";
import { tns } from "tiny-slider/src/tiny-slider.js";

let slider;
let sliderInfo;

onMount(() => {
  slider = tns({
    // 配置同上
  });
  sliderInfo = getSliderInfo();
});

function getSliderInfo() {
  if (!slider) return null;
  return slider.getInfo();
}

内容的提问来源于stack exchange，提问作者Tchaly Leandre Jr.