@signaldb/vue

vueReactivityAdapter (default)

import { Collection } from '@signaldb/core'
import vueReactivityAdapter from '@signaldb/vue'
import { watchEffect } from 'vue'

const posts = new Collection({
  reactivity: vueReactivityAdapter,
})

watchEffect((onCleanup) => {
  const cursor = posts.find({ author: 'John' })
  console.log(cursor.count())
  onCleanup(() => cursor.cleanup())
})

Reactivity adapter for usage with Vue.

INFO

The API of Vue doesn't allow automatic cleanup nor reactive scope checking. In Vue, the function passed to the watchEffect() function gets a onCleanup callback that can be used to cleanup the effect. You have to use this to cleanup the cursor manually (see example above).

You also must manually disable reactivity when making calls outside your watchEffect() function to avoid memory leaks. You can do this by passing { reactive: false } to your options (e.g. <collection>.find({ ... }, { reactive: false })).

Vue.js is renowned for its powerful reactivity system, enabling developers to effortlessly bind and update the UI based on underlying data changes. Integrating Vue.js with signaldb, particularly with signals (often referred to as refs), is a fusion of two reactivity paradigms. Signals in Vue.js act as reactive reference pointers, and when their underlying values change, any dependent computation or rendering logic responds dynamically. Signaldb's reactivity adapter bridges the gap between Vue’s reactive ecosystem and the database layer. By leveraging this adapter, Vue.js developers can seamlessly synchronize their component state with signaldb collections, ensuring real-time data accuracy. If your Vue.js application doesn't currently implements a reactivity adapter for signaldb, it's straightforward to introduce one. This adapter ensures that dependencies are accurately tracked and efficiently notified when data mutations occur. Thus, integrating Vue.js with signaldb not only enhances the dynamic capabilities of your application but also enriches user experiences with instantaneous data reactivity.