如何：Vue3 组合 API 插件

Question

如何创建适用于 Vue3 组合的插件 API。

例如一个 Socket.io 插件，可以在每个组件中访问。

Answer 1

为 vue3 创建任何插件（例如：Socket.io）并在您的组合 API 组件和 vue2/option api 组件中使用它。

创建插件本身并将其添加到您的 plugins 文件夹

Socket.io使用3.0.1

插件：

import { io } from 'socket.io-client'

export default {
  install: (app, { connection, options }) => {
    const socket = io(connection, options)
    app.config.globalProperties.$socket = socket

    app.provide('socket', socket)
  }
}

在你的main.js中添加以下内容

import Socketio from '@/plugins/Socket.io'

app.use(Socketio, {
    connection: 'http://localhost:4001',
    options: {
        // Your Socket.io options here
    }
})

main.js例子

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Socketio from '@/plugins/Socket.io'

const app = createApp(App)

app.use(store)
app.use(router)
app.use(Socketio, {
    connection: 'http://localhost:4001',
    options: {
        // Your Socket.io options here
    }
})

app.mount('#app')

用法：

选项 API: this

在选项api中可以使用this.$socket访问套接字

<template>
// HTML here
</template>

<script>
export default {
   mounted () {
       // You can use the socket like shown below
       this.$socket.on('foo', () => {
           console.log('bar')
       })
   }
}
</script>

选项 API: inject

在选项 api 中，您还可以注入插件

<template>
// HTML here
</template>

<script>
import { inject } from 'vue'

export default {
   mounted () {
       const socket = inject('socket')
       // You can use the socket like shown below
       socket.on('foo', () => {
           console.log('bar')
       })
   }
}
</script>

作文APIinject

在作文中API你应该使用inject

<template>
    {{ bar }}
</template>

<script>
import { ref, inject } from 'vue'

export default {
    setup() {
        const socket = inject('socket')
        return { ...foo(socket) }
    }
}

function foo(socket) {
    const bar = ref('')
    socket.on('foo', (value) => {
        bar.value = value
    })

    return {
        bar
    }
}
</script>

如何：Vue3 组合 API 插件

How to: Vue3 composition API plugin

vue.js

socket.io

vuejs3

vue-composition-api

用法：