URL存储解锁数据管理的新思路，重新定义数据传输与共享（@vue/repl）

// 调用
import { ReplStore } from '@vue/repl'

const store = new ReplStore({
  serializedState: location.hash.slice(1),
  // 其他配置项...
})

if (serializedState) {
  // URL中有存储的数据
  const saved = JSON.parse(atou(serializedState))
  // 实现设置代码的逻辑
  for (const filename in saved) {
    setFile(files, filename, saved[filename])
  }
} else {
  // URL中没有存储的数据
  // 设置默认的代码
  setFile(files, defaultMainFile, welcomeCode)
}

// 借助vue3 watchEffect 实时响应，修改 URL
watchEffect(() => history.replaceState({}, '', store.serialize()))

serialize() {
   const files = this.getFiles()
   const importMap = files[importMapFile]
   if (importMap) {
     // 其他处理逻辑
   }
   return '#' + utoa(JSON.stringify(files))
 }

import { zlibSync, unzlibSync, strToU8, strFromU8 } from 'fflate'

// 解码
export function atou(base64: string): string {
  const binary = atob(base64)

  // zlib header (x78), level 9 (xDA)
  if (binary.startsWith('\x78\xDA')) {
    const buffer = strToU8(binary, true)
    const unzipped = unzlibSync(buffer)
    return strFromU8(unzipped)
  }

  // old unicode hacks for backward compatibility
  // https://base64.guru/developers/javascript/examples/unicode-strings
  return decodeURIComponent(escape(binary))
}

// 编码
export function utoa(data: string): string {
  const buffer = strToU8(data)
  const zipped = zlibSync(buffer, { level: 9 })
  // 二个参数传了true，代表转换成二进制字符串，因为js内置的btoa和atob方法不支持Unicode字符串，而我们的代码内容显然不可能只使用ASCII的256个字符
  const binary = strFromU8(zipped, true)
  return btoa(binary)
}

let encodedData = window.btoa("Hello, world"); // 编码
let decodedData = window.atob(encodedData); // 解码