教你巧用 import.meta 实现热更新的问题

<script type="module">
	console.log(import.meta)  // {url: 'http://127.0.0.1:5500/dist/index.html?a=1'}
</script>

import { defineStore, acceptHMRUpdate } from 'pinia'

const useAuth = defineStore('auth', {
  // options...
})

// make sure to pass the right store definition, `useAuth` in this case.
if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useAuth, import.meta.hot))
}

interface ImportMeta {
  readonly hot?: {
    readonly data: any

    accept(): void
    accept(cb: (mod: any) => void): void
    accept(dep: string, cb: (mod: any) => void): void
    accept(deps: string[], cb: (mods: any[]) => void): void

    prune(cb: () => void): void
    dispose(cb: (data: any) => void): void
    decline(): void
    invalidate(): void

    on(event: string, cb: (...args: any[]) => void): void
  }
}

if (import.meta.webpackHot) {
  // 使 action 和 mutation 成为可热重载模块
  import.meta.webpackHot.accept(['./mutations', './modules'], () => {
    // 获取更新后的模块
    // 因为 babel 6 的模块编译格式问题，这里需要加上 `.default`
    const newMutations = require('./mutations').default
    const newModules = require('./modules').default
    // 加载新模块
    store.hotUpdate({
      mutations: newMutations,
      modules: {
        ...newModules
      }
    })
  })
}

const url = new URL(url [, base])

new URL('./relative-path', import.meta.url)

function loadImg (relativePath) {
  const url = new URL(relativePath, import.meta.url)
  const image = new Image()
  image.src = url
  return image
}
loadImg('../../images/1.jpg')