vue3注册添加全局实例属性的方法,如何在setup函数中调用

简介: vue3注册添加全局实例属性的方法,如何在setup函数中调用

Vue 3 中,你可以使用全局 API 的 createApp 方法来创建 Vue 应用,并通过该应用的 config.globalProperties 属性来添加全局实例属性。这样,你就可以在任何组件内部通过 this 访问这些属性。

但是,需要注意的是,在 Vue 3 的 Composition API 中,this 关键字不再在 setup 函数内部可用。因此,如果你正在使用 Composition API,你需要使用 getCurrentInstance 函数来获取当前实例,并访问其属性。

以下是如何在 Vue 3 中注册全局实例属性的步骤

1. 使用 createApp 方法创建 Vue 应用

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

const app = createApp(App);

2. 通过 config.globalProperties 添加全局实例属性

app.config.globalProperties.$myGlobalProperty = 'Hello, World!';

3. 在组件中使用全局实例属性

export default {
    mounted() {
      console.log(this.$myGlobalProperty); // 输出 "Hello, World!"
    }
  }`
  // 如果你使用的是 Composition API:
  
  // 你需要从 `vue` 包中导入 `getCurrentInstance` 函数,并使用它来访问全局实例属性。
import { getCurrentInstance } from 'vue';
  
  export default {
    setup() {
      const instance = getCurrentInstance();
      
      if (instance) {
        console.log(instance.appContext.config.globalProperties.$myGlobalProperty); // 输出 "Hello, World!"
      }
    }
  }

注意:使用全局实例属性时应该谨慎,避免命名冲突,并确保这些属性不会意外地被组件修改。

另外,Vue 3 提供了更灵活和可维护的替代方案,如使用 Provide/Inject API 或 Vuex 进行状态管理,这可能更适合大型应用或需要更严格状态管理的场景。

注意:getCurrentInstance 主要用于库/高级用途,并可能在未来的 Vue 版本中发生变化或被移除。在常规应用开发中,应优先考虑使用其他 API 和模式。

更新:在 Vue 3.2+ 中,你可以使用 provideinject API 来更安全、更明确地共享状态。这是推荐的方法,因为它提供了更好的封装和类型支持。

// 在根组件或父组件中
import { provide, ref } from 'vue';

export default {
  setup() {
    const myGlobalProperty = ref('Hello, World!');
    provide('myGlobalProperty', myGlobalProperty);
  }
};

// 在任何子组件中
import { inject } from 'vue';

export default {
  setup() {
    const myGlobalProperty = inject('myGlobalProperty');
    console.log(myGlobalProperty.value); // 输出 "Hello, World!"
  }
};

使用 provideinject 可以避免全局状态的潜在问题,并使得状态管理更加明确和可预测。

总的来说,选择哪种方法取决于你的具体需求和偏好。

注意:在 Vue 3.x 中,provide 和 inject 只能在 setup 函数内部使用,因为它们是基于 Composition API 的。如果你使用的是 Options API,你可能需要将你的逻辑迁移到 Composition API,或者使用其他方法(如 mixins、Vuex 等)来共享状态。

希望这可以帮助你理解如何在 Vue 3 中注册和使用全局实例属性!

4. 方式对比

  1. 方式一

在 Vue 2 中, Vue.prototype 通常用于添加所有组件都能访问的 property。 在 Vue 3

等同于config.globalProperties。这些 property 将被复制到应用中作为实例化组件的一部分

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

// 之后 - Vue 3 
const app = createApp({})
app.config.globalProperties.$http = () => {} ```

上面是官方给得说明

下面是我的具体用法:

在vue3中注册一个全局实例方法

  import {createApp} from 'vue'
  import App from './App.vue'
  
  const app = createApp(App)
  app.config.globalProperties.$translate = key => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, i18n)
    }

在vue实例的setup()函数中没有this对象,如何调用实例方法$translate呢:

  import {getCurrentInstance} from "vue";
  
  const internalInstance = getCurrentInstance();
    const request =
        internalInstance.appContext.config.globalProperties.$translate;

哦了

  1. 第二种方式:通过provide注入

与在 2.x 根实例中使用 provide 选项类似,Vue 3 应用实例也提供了可被应用内任意组件注入的依赖项:

    //入口处全局导入
        app.provide("dayjs", dayjs)
        app.provide("request",request)
<script>
import {toRef, nextTick, inject, ref, computed} from "vue"
export default {
  //普通用法
  inject: ['dayjs'],
  setup(props, {emit}) {
  //setup中的用法
    const dayjs = inject("dayjs")
    return {
    }
  }
}
</script>

使用 provide 在编写插件时非常有用,可以替代 globalProperties。

在应用之间共享配置

上面也是官方推荐得方式,但是他举得这个例子有点瞎b。

具体用法可以看另一篇。

相关文章
|
7天前
|
JavaScript
|
10天前
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
9天前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
57 1
|
10天前
|
JavaScript
vue 组件中的 data 为什么是一个函数 ?
【10月更文挑战第8天】 在 Vue 组件中,`data` 被定义为一个函数而非普通对象,以确保每个组件实例拥有独立的数据空间,避免数据混乱。这种方式还支持数据的响应式更新、组件的继承与扩展,并有助于避免潜在问题,提升应用的可靠性和性能。
14 2
|
10天前
|
JavaScript 开发者
Vue Render函数
【10月更文挑战第11天】 Vue 的 Render 函数提供了一种强大而灵活的方法来创建虚拟 DOM 节点,使开发者能够更精细地控制组件的构建过程。通过 `createElement` 参数,可以动态生成各种元素和组件,实现复杂逻辑和高级定制。尽管使用 Render 函数需要更多代码和对虚拟 DOM 的深入理解,但它在处理复杂场景时展现出巨大的优势。
10 2
|
9天前
|
设计模式 JavaScript 开发工具
Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护
Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护
14 0
|
9天前
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
14 0
|
9天前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
51 0
|
9天前
|
存储 JavaScript 前端开发
Vue.js项目中全面解析定义全局变量的常用方法与技巧
Vue.js项目中全面解析定义全局变量的常用方法与技巧
20 0
|
JavaScript
vue 踩坑 01 ->两种创建vue实例的区别
第一个例子 {{msg}} var app = new Vue({ el: '#app', data: { m...
964 0