如何在页面加载时调用Stimulus controller的函数？

首先先修正你贴出的代码里的两处语法错误，不然逻辑跑不通：

• jQuery的显示/隐藏切换方法是toggle，你写成了tpggle，属于拼写错误
• 代码里$(this.testTargets[0]缺少闭合的右括号

Stimulus本身提供了两种零额外依赖的实现方式，不需要手动写DOM加载监听事件：

方案1：利用内置的connect生命周期钩子（推荐） #

每个Stimulus Controller都自带生命周期回调，其中connect()方法会在Controller绑定的DOM元素渲染完成、页面初始加载结束后自动执行，你可以直接在这个方法里调用需要触发的hide函数，只需要补全函数依赖的checked参数即可。
完整代码示例：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  // 必须先声明用到的target，否则无法通过this.testTargets获取元素
  static targets = ["test"]

  connect() {
    // 替换成你实际用来触发切换的复选框元素，这里示例是从当前controller根元素下找checkbox
    const triggerCheckbox = this.element.querySelector('input[type="checkbox"]')
    // 构造和原生事件结构一致的参数，直接复用hide方法
    this.hide({
      currentTarget: triggerCheckbox
    })
  }

  hide(event) {
    // 修正了原代码的拼写和括号问题
    $(this.testTargets[0]).toggle(event.currentTarget.checked)
  }
}

方案2：使用Action的@load修饰符 #

如果不想在Controller里写生命周期逻辑，可以直接在DOM的action绑定上添加@load修饰符，Stimulus会在页面加载完成后自动触发绑定的方法，同时自动把当前元素作为event.currentTarget传入，和你原来绑定的change事件逻辑完全兼容，不需要修改hide方法的代码。
DOM写法示例：

<div data-controller="toggle">
  <!-- 同时绑定change事件和页面加载触发，两种场景复用同一个hide方法 -->
  <input type="checkbox" data-action="toggle#hide @load->toggle#hide">
  <div data-toggle-target="test">
    这是需要被切换显示/隐藏的内容块
  </div>
</div>

注意：如果你的触发复选框有默认选中/未选中的初始状态，这两种方案都会在页面加载时正确读取初始状态，执行对应的显示/隐藏逻辑，不会出现页面加载后内容状态和复选框状态不匹配的问题。

内容的提问来源于stack exchange，提问作者learn