Computed Properties
This package helps deriving data from other data. It's especially well suited for computation-heavier dependencies since it caches and lazy-evaluates computed properties.
It conceptually borrows heavily from Vue.js' computed properties, supports all evergreen browsers and IE 11 and features a reasonably small size (1.6 KB minified & gzipped).
Installation
Install it from npm:
npm install --save computed-properties
Include in the Browser
You can use this package in your browser with one of the following snippets:
-
The most common version. Compiled to ES5, runs in all major browsers down to IE 11:
<!-- or from CDN: --> -
If you're really living on the bleeding edge and use ES modules directly in the browser, you can
import
the package as well:// or from CDN:As opposed to the snippets above, this will not create a global
Store
function.
Include in Node.js
Include this package in Node.js like you usually do:
const Store =
Usage
Create a store by passing a configuration object to the Store
function:
const programmer =
You can play with this example on CodePen.
All functions in the configuration object (fullName
, bestAt
and developerStory
in our case) will be treated as computed properties. You can get their values just like with any regular property:
programmerfullName // "Jane Doe"
Now if we adjust the first name of our programmer, the fullName
will also be updated:
programmerfirstName = 'John'programmerfullName // "John Doe"
Context-free Computed Properties
If you don't like the style of computed properties accessing the this
object, they also get passed the store as their first parameter.
The programmer.fullName
computed property, for example, could also have been written as follows:
Watch Properties
You can watch any regular or computed property on the created programmer
using the $watch()
method:
const unwatch = programmer // Calling unwatch() will stop watching the `fullName` property
Set a new Property in an Object
All properties of an object present at initialization time will be tracked. However, if you want to add a new property, you have to use the $set()
method:
programmerskills
Set an Array Item's Value
While all array methods (e.g. push()
) are tracked, setting an array's item via bracket access cannot be tracked:
programmerhobbies0 = 'Cycling' // Will not update the `developerStory`
To trigger dependency changes you'd either have to replace the whole hobbies
array, or set the respective item via the $set()
method:
programmerhobbies // Will update the `developerStory`
Functions as Properties
Since all functions in a Store
's configuration object are treated as computed properties, there's no way that a regular property can contain a function.
However, there's a very simple workaround: Create a computed property that returns the desired function.
Methods
The Store
function has no built-in way to attach methods to it, but you can assign them onto the created store:
// Possibly update last name on marriageprogrammer { if newLastName thislastName = newLastName }