vue-full-reactive

Extended version of @vue/reactivity reactive function.

Package provides a single function - makeFullReactive, that adds the following functionality to Vue's reactive:

1. Turns all target's getters into Vue's computed.
2. ( Optional ) Binds all target's method's this to target.

These modifications are deep — changes will be applied to all nested objects.

Installation

npm i vue-full-reactive

API

makeFullReactive< T extends object >( target: T, options?: Options ): T

Note: in fact, makeFullReactive return type is Vue's UnwrapNestedRefs< T >, but actually T and UnwrapNestedRefs< T > are identical types. So, T is used solely for convenience.

Options

• autoBind: boolean

  Bind all target's method's this to target.

  Default: true

Usage

With classes:

import { makeFullReactive } from 'vue-full-reactive'

class CounterStore {

	constructor() {
		// making a reactive class instance
		return makeFullReactive( this )
	}

	// becomes a reactive value
	value = 0

	// 'this' will always be CounterStore's reactive instance
	inc() {
		this.value++
	}

	// becomes a computed
	get double() {
		return this.value * 2
	}

}

const counterStore = new CounterStore()

or with object literals:

import { makeFullReactive } from 'vue-full-reactive'

const counterStore = makeFullReactive(
	{
		value: 0,

		inc() {
			this.value++
		},

		get double() {
			return this.value * 2
		}
	}
)

Demo

You can find demo project in ./demo folder.