How to make 3 composable function "communicate" with each other

beeawesome — Sun, 07 Aug 2022 15:18:40 +0000

Hi devs!
I am trying to do something simple with Vue.js and not sure if my approach is ok.
So.. I'm trying to make 3 composable functions to "communicate".
I'm just not sure how.

export default useServer = (serverSettings) => {
    let connect = () => {...}
    let write = (command) => {
        // Gets a command from the users GUI @click
        // then passes it to the gateway.write(command)
    }
    let read = (data) => {
        // gets data from the gateway and prints data. 
    }
}

export default useDevice = (deviceSettings) => {
    let connect = () => {...}
    let write = (command) => {
        // executes command on device
    }
    let read = (data) => {
        // reads data from the device. 
    }
}

export default useGateway = (gwSettings, device, server) => {
    let connect = () => {...}
    let write = (command) => {
        // passes the command to the device write() method
    }
    let read = () => {
        // reads the data from the device and send it to the server
    }
}

let server = useServer(serverSettings)
let device = useDevice(deviceSettings)
let gateway = useGateway(gwSettings, device, server)

im not sure how to apply event listeners for this case. Since these are variables and not events.
I thought of using the watch api for the read/write variables, instead of the current methods.
example: inside the useGateway() composables, to have some kind of a watcher:

// note: the `write` variable should be changes to a regular variable and not a method

watch(
  () => server.write, // <-- watch this
  read // <-- trigger this
);

DEV Community: beeawesome

How to make 3 composable function "communicate" with each other