【electron-todo】【bug】vue.js3.0 + typescript 挂载全局对象

electron-todo系列文章目录

---

---

前言

最近在学习electron，想要做一个TODO list的应用，第一篇文章也不知道怎么写，就随便划一下了，这里就写一下遇见的第一个bug

---

一、问题背景

vue.js 最近升级到了3.0的预览版，然而很多API都和原来的2.x版本有较大的改动。再加上我的开发使用的是typescript，文档和说明就更少，总之也是折腾了一段时间才搞定这个bug。

二、不同版本Vue引入全局对象

首先放上官方给出的文档：
Vue.js 2.x

import Vue from 'vue'
import App from './App.vue'

Vue.config.ignoredElements = [/^app-/]
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)

// 2.x版本中使用 Vue.prototype挂载
Vue.prototype.customProperty = () => {}

new Vue({
  render: h => h(App)
}).$mount('#app')

Vue.js 3.0

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.isCustomElement = tag => tag.startsWith('app-')
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)

// 3.x版本中使用app.config.globalProperties进行挂载
app.config.globalProperties.customProperty = () => {}

app.mount(App, '#app')

三、bug的复现和解决

代码如下（示例）：

// 路径 ./a.ts
const a = new Date();
export default a;

// 路径 ./main.ts
// ...
app.config.globalProperties.$a = a;
// ...

因为使用的是typescript，所以会出现找不到$a的情况报错信息如下：

再参考一下官网上的文档，发现可以将$a变成一个匿名函数，调用$a就可以得到a对象，所以代码更改一下：

app.config.globalProperties.$a = () => {
  return a;
};

使用时就像这样：this.$a().getTime()就可以正常使用，bug得以解决

最后

没什么写博客的经验，可能会有一些逻辑不通的地方，还望指教。