Skip to content


Zova recommends using local bean and store bean to encapsulate and reuse logic. There are a lot of useful composables in the Vue ecosystem, such as VueUse, which can be used directly in Zova

The following takes mouse tracker as an example to demonstrate how to use Composables

1. Create Composable


import { ref, onMounted, onUnmounted } from 'vue';

export function useMouse() {
  const x = ref(0);
  const y = ref(0);

  function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;

  onMounted(() => window.addEventListener('mousemove', update));
  onUnmounted(() => window.removeEventListener('mousemove', update));

  return { x, y };

2. Inject and use Composable

Take the existing page component of module a-demo as an example:


import { BeanControllerPageBase, Local, type ReturnTypeComposable, UseComposable } from 'zova';
import { useMouse } from './mouse.js';

export class ControllerPageState extends BeanControllerPageBase {
  $$mouse: ReturnTypeComposable<typeof useMouse>;
  • line 6: Use the @UseComposable decorator function to pass in the composable to be used
  • line 7: Declare the variable $$mouse and generate its type through the type tool ReturnTypeComposable


export class RenderState extends BeanRenderBase {
  render() {
    return (
        Mouse position is at: {this.$$mouse.x}, {this.$$mouse.y}

Released under the MIT License.