vue3学习记录之插件

插件plugins是一种能为vue添加全局功能的代码,官网连接：cn.vuejs.org/guide/reusa…

项目的src文件夹下新建plugins文件夹

新建i18n.js文件 插件是一个拥有install方法的对象

export default {
    install: (app, options)=>{
        app.config.globalProperties.$translate = (key) =>{
            return key.split('.').reduce((o, i) =>{
                if(o) return o[i];
            }, options)
        }
    }
}

也可以是安装函数本身

 const install = (app, options) =>{
    app.config.globalProperties.$translate = (key) =>{
        return key.split('.').reduce((o, i) =>{
            if(o) return o[i];
        }, options)
    }
     // 根据传入的选项进行其他设置
     if (options && options.message) {
          console.log('来自选项的message', options.message)
     }

     // 可以根据选项添加更多的自定义行为
     if (options && options.enableFeatureX) {
            // 启用某个功能
       console.log('Feature X is enabled.');
     }
}
export default install

插件发挥作用的常见场景 通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令 通过 app.provide() 使一个资源可被注入进整个应用 向 app.config.globalProperties 中添加一些全局实例属性或方法 一个可能上述三种都包含了的功能库 (例如 vue-router)。

使用插件

在main.js中引入插件文件，并通过use使用插件，注意：app.use()要在app.mount()之前，不然会报错,因为.use() 和 .mount() 方法的调用顺序有其特定的原因。简单来说，.use() 是用来安装插件的，而 .mount() 则是将 Vue 应用挂载到 DOM 上。为了确保所有通过插件添加的功能（如全局属性、指令等）在应用被挂载之前就已经准备好并可用，.use() 必须写在 .mount() 之前。

<script setup>
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import i18nPlugin from './plugins/i18n'
const app = createApp(App)
//可传入选项
app.use(i18nPlugin, {
  greetings: {
    hello: '你好呀!'
  }
})
app.mount('#app')

接着在需要使用插件的地方

<script setup>

</script>

<template>
  <div style="margin-bottom: 230px;padding-top: 30px;">
    <!-- 插件使用 -->
    <h1>{{ $translate('greetings.hello') }}</h1>
  </div>
</template>

在插件中使用Provide（提供） / Inject（注入）

当希望多个组件共享某些状态或配置时可以使用Provide / Inject，如果是复杂的状态管理可以用vuex 主题管理插件themePlugin.js

import {ref} from 'vue'
export default {
    install(app,options){
        const defaultTheme = options.defaultTheme || 'light'
        const theme = ref(defaultTheme)
        app.provide('theme', theme)

        app.config.globalProperties.$toggleTheme = ()=>{
            theme.value = theme.value === 'light' ? 'dark' : 'light'
        }
    }
}

main.js

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import i18nPlugin from './plugins/i18n'
import themePlugin from './plugins/themePlugin'
const app = createApp(App)
app.use(i18nPlugin, {
  greetings: {
    hello: '你好呀!'
  }
})
app.use(themePlugin,{
    defaultTheme: 'dark'
})
app.mount('#app')

使用主题插件

<script setup>
import { inject, getCurrentInstance } from "vue";
const theme = inject("theme");
// 获取当前组件实例
const { proxy } = getCurrentInstance();
//点击切换主题
function changeTheme() {
  if (proxy && proxy.$toggleTheme) {
    proxy.$toggleTheme();
  }
}
</script>

<template>
  <div
    style="margin-bottom: 230px;padding-top: 30px;"
    :class="theme"
  >
    <button @click="changeTheme">change theme</button>
    <!-- 插件使用 -->
    <h1>{{ $translate('greetings.hello') }}</h1>
  </div>
</template>
<style scoped>
.light {
 background: linear-gradient(315deg, #baf 25%, #647eff);
    border: none;
}
.dark {
  background: #000;
}
</style>