Vue3 挂载全局方法

Vue3 挂载全局方法

使用(provide/inject)

在main.ts中使用

import { createApp } from 'vue'
import App from './App.vue'
import VueCookies from 'vue-cookies';

 
const app = createApp(App)
app.provide('Cookies', VueCookies) // 将getAction方法挂载到全局
 
app.mount('#app')

如果用在单独的ts文件中会报错

页面中使用

<script setup lang="ts">
  import { inject } from 'vue'
  const $cookies: any = inject('Cookies')
</script>

使用 app.config.globalProperties 和 getCurrentInstance()

在main.ts中

import { createApp } from 'vue'
import App from './App.vue'
import VueCookies from 'vue-cookies';
 
const app = createApp(App)

app.config.globalProperties.Cookies = VueCookies;
 
app.mount('#app')

在页面中使用

<script setup lang="ts">
  import { getCurrentInstance } from 'vue'
   const proxy: any = getCurrentInstance()?.proxy;
   const $cookies: any = proxy.Cookies;
    
   console.log('$cookies:', $cookies)
</script>