Svelte中如何提取onMount内定义的myip变量供外部使用

Svelte 原生响应式机制不需要额外实现类似 React useState 的能力，只要把变量声明在组件脚本顶层作用域，在生命周期钩子内赋值，模板和其他业务逻辑就能自动获取更新后的值。

问题原因 #

你当前的代码无法访问myip的核心原因有两个：

• myip 被const声明在onMount回调的if/else块内部，属于块级作用域变量，作用域外无法访问
• 块内用const声明的变量本身不支持重新赋值，无法做值的同步更新

修正后代码 #

把myip的声明挪到<script>顶层，在onMount内直接给变量赋值即可，Svelte 会自动追踪变量变化，更新模板渲染内容：

<script>
  import { page } from '$app/stores'
  import axios from 'axios'
  import { onMount } from 'svelte'

  // 顶层声明响应式变量，可设置初始值做加载态兜底
  let myip = ''

  onMount(async () => {
    const firstip = await axios.get(`https://geolocation-db.com/json/`)
    const finalip = await axios.get(`https://api.ipregistry.co/${firstip.data.IPv4}?key=6nn8zr4k2h34cwkw32`)

    if (!finalip.data.carrier.name) {
      // 直接给顶层变量赋值，不要在块内重新声明变量
      myip = finalip.data.location.city
      console.log(myip)
    } else {
      myip = '7 km'
      console.log(myip)
    }
  })

  const { id } = $page.params
  console.log(id)
  const name = id.charAt(0).toUpperCase() + id.slice(1)
</script>

<!-- 模板中直接调用即可，onMount赋值后会自动刷新渲染结果 -->
<div>
  <p>定位信息：{myip}</p>
  <p>当前名称：{name}</p>
</div>

扩展用法 #

如果需要在myip更新后触发其他业务逻辑，直接使用Svelte 响应式声明语法$:即可，不需要手动写依赖监听：

// myip每次变化时，这行代码会自动执行
$: console.log('最新定位值：', myip)

你也可以根据初始值做加载态判断，避免页面初始加载时出现空白：

{#if myip === ''}
  <p>定位信息加载中...</p>
{:else}
  <p>当前定位：{myip}</p>
{/if}

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