Logic sharing

Compasables

In React, we have hooks, and in Vue (or a reactive context), we have composables. The concept is similar to hooks.

// compasables.js
import { ref, watchPostEffect } from '@unisonjs/vue';

export function useOnlineStatus() {
 const isOnline = ref(true);

 function handleOnline() {
   isOnline.value = true;
 }
 function handleOffline() {
   isOnline.value = false;
 }

 watchPostEffect((onCleanup) => {
   window.addEventListener('online', handleOnline);
   window.addEventListener('offline', handleOffline);

   onCleanup(() => {
     window.removeEventListener('online', handleOnline);
     window.removeEventListener('offline', handleOffline);
   });
 });
 return isOnline;
}

// StatusBar.jsx
import { $unison } from '@unisonjs/vue';
import { useOnlineStatus } from './compasables';

const StatusBar = $unison(() => {
  const isOnline = useOnlineStatus();
  
  return () => <h1>{isOnline.value ? '✅ Online' : '❌ Disconnected'}</h1>;
});

export default StatusBar;

Global state

Vue allows you to declare state outside of a component, making it possible to create a shared store. In reactive-vue, you can do the same.

Using ref

// store.js
import { ref } from '@unisonjs/vue'

const count = ref(0);

export const store = {
  get count() {
    return count.value
  },
  increment() {
    count.value++
  }
}

Using reactive

// store.js
import { reactive } from '@unisonjs/vue'

export const store = reactive({
  count: 0,
  increment() {
    this.count++
  }
})

Consuming the shared store

// shared-counter.jsx
import { reactivity as rct } from '@unisonjs/vue';
import { store } from './store.js';

const SharedCounter = $unison(() => {
  return () => (
    <div>
      <p>Current count: {store.count}</p>
      <button onClick={store.increment}>Increment</button>
    </div>
  );
});

export default SharedCounter;