Vue 3.x 设置全局属性/方法

1. provide/inject

• 参数：

  • {string | Symbol} key
  • value

• 返回值：

  • 应用实例

• 用法：

  在应用实例上设置一个可以被注入到应用范围内所有组件中的值。当组件要使用应用提供的 provide 值时，必须用 inject 来接收。

  从 provide/inject 的角度，应用程序为根级别的祖先，而根组件是其唯一的子级。

  不要与 provide 组件选项 或组合式 API 中的 provide 方法 混淆。虽然它们也是 provide/inject 机制的一部分，但是是用来配置组件 provide 的值的。

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

// 创建应用实例
const app = createApp(App)

// 应用向根组件 App 中注入一个 property
app.provide('user', 'administrator')

选项式API：

// 应用内任意一个子组件
<template>
  <div>{{ user }}</div>
</template>

<script>
export default {
  name: 'Home',
  inject: ['user'],
  mounted() {
    console.log(this.user) // 'administrator'
  },
}
</script>

组合式 API：

// 模版部分与上面相同
<script>
import { inject, onMounted } from 'vue'
export default {
  setup() {
    const user = inject('user')
    onMounted(() => {
      console.log(user) // 'administrator'
    })
    return {
      user,
    }
  }
}
</script>

在setup()内部，this不是该活跃实例的引用，因为setup()是在解析其它组件选项之前被调用的，所以setup()内的this的行为与其它选项中的this完全不同。
我们在setup()中一般不使用this而是用其他替代方法，且尽量把方法、生命周期钩子、计算属性等放到setup()内实现。避免与其它选项式 API 一起混用。

通过应用 provide 值在写插件时尤其有用，因为插件一般不能使用组件提供值。这是使用 globalProperties 的替代选择。

2. globalProperties

用来添加全局 property，命名冲突时，组件的 property 具有优先权。

• 类型：[key: string]: any

• 用法：只适用于选项式API

const app = createApp({})
app.config.globalProperties.foo = 'bar' 
app.config.globalProperties.$http = () => {}

// 之前(Vue 2.x)
// Vue.prototype.$http = () => {}

app.component('child-component', {
  mounted() {
    console.log(this.foo) // 'bar'
  }
})

建议全局属性 key 名前面加上$(或者别的自定义标注)，便于和组件属性区分。

那如何在setup()里使用通过globalProperties挂载的全局属性呢？
在如果想在setup()内部访问组件实例，需要用到 getCurrentInstance：

import { getCurrentInstance } from 'vue'

const MyComponent = {
  setup() {
    const internalInstance = getCurrentInstance()
    // 访问 globalProperties
    console.log(internalInstance.appContext.config.globalProperties) 
  }
}

getCurrentInstance 只能在 setup 或生命周期钩子中调用。

但这是 Vue3 提供给高阶场景(譬如库)的方案，非常不建议把它当作在组合式 API 中获取this的替代方案来使用。因此这里只做了解。

• 延伸：全局过滤器
  Vue 3 中删除了过滤器filters，今后用方法调用或计算属性替代它们。
  如果在 Vue 2 版本迁移过程中，应用中存在全局注册的过滤器，你可以利用全局属性(globalproperties)在所有组件中使用它:

// main.js
const app = createApp(App)

app.config.globalProperties.$filters = {
  textFilter(text, length) {
    let shortText = text
    const len = length ? length : 20
    if (text && text.length > len) {
      shortText = text.substring(0, len) + '...'
    }
    return shortText
  }
}

然后就能通过$filters对象在模板中需要处理的地方使用：

<template>
  <p>{{ $filters.textFilter(user.introduction, 10) }}</p>
</template>

注⚠️：通过以上方式添加的全局属性在模版中访问都不需要this。在 选项API 中使用需要 this。

其实还有一个 全局 mixin 可以实现全局属性的定义。但mixin是为组件逻辑重用设计的，在 Vue 3 的 组合式 API 出来后已经不建议在应用代码中使用了。