Create a reference object that can be monitored.
Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android | Deno | Node.js |
---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | 12 | 1.5 | 9.5 | 3 | 18 | 4 | 10.1 | 1 | 1.0 | 37 | 1.0 | 0.10.0 |
npm i ts-refs
-
Create
-
typescript
import Refs from "ts-refs"; const refs = new Refs(); // Set cache storage. refs.setLocalStorage(localStorage); refs.setSessionStorage(sessionStorage);
-
javascript
<script type="application/javascript" src="ref.min.js"></script> <script type="application/javascript"> var refs = new RefModule.default(); // Set cache storage. refs.setLocalStorage(localStorage); refs.setSessionStorage(sessionStorage); </script>
-
-
Create
const valueRef = refs.of(0); // RefValue<number>
-
get
valueRef.get(); // 0
-
set
valueRef.set(1);
-
listen
valueRef.listen((value)=>{ // TODO },this);
-
interrupt Interrupt
Ref
listen by target.valueRef.interrupt(this);
-
clear
Reset to default value.
valueRef.clear();
Save the computed results. Recompute when Ref
changes.
-
Create
const valueRef = refs.of(0); const computedRef = refs.ofComputed(()=>{ return valueRef.get()+1; }); // RefComputed<number>
-
get
Changed by dependent on other
Ref
.computedRef.get(); // 0+1
-
listen
Change by o
computedRef.listen((value)=>{ // TODO },this);
-
interrupt Interrupt ref listen by target.
computedRef.interrupt(this);
-
clear
Clear computed results.
computedRef.clear();
Cache the last value in storage.
-
Create
const valueRef = refs.ofCache({ name:'string' , local:false // switch storage type , value: 0 }); // RefCache<number>
-
get
valueRef.get(); // 0
-
set
valueRef.set(1);
-
listen
valueRef.listen((value)=>{ // TODO },this);
-
interrupt Interrupt
Ref
listen by target.valueRef.interrupt(this);
-
clear
Reset to default value.
valueRef.clear();
-
off
Remove all dependencies and listener by scope.
refs.off(this);
-
runInScope
let a = {}; refs.runInScope(()=>{ // The default scope for all operations is `a`. ref1.listen(()=>{}); ref2.listen(()=>{}); ref3.listen(()=>{}); },a);
-
tx
Post notifications after processing all
Ref
updates.refs.tx(()=>{ ref1.set(...) ref2.set(...) ref3.set(...) });